首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于打包工具Webpack进行项目开发实例

Posted in Javascript onMay 29, 2018

一. 常见打包工具的介绍

在打包工具中,常见的有RequireJS,browserify,webpack,其中RequireJS是一个JavaScript模块加载器,基予ADM(async module define)规范实现,browserify是一个以在浏览器中使用Node.js模块为出发点的工具,而webpack则是一个为前端模块打包构建而生的工具.

二. 工具的使用

(1)作为npm包的RequireJS提供了一个可执行的r.js工具,通过命令行执行,使用方式如下:

npm install -g requirejs
r.js -o app.build.js

(2)browserify提供的命令行工具,使用如下面所示:

npm install -g browserify
browserify main.js -o bundle.js

(3)webpack的使用

如下面所示,使用命令进行安装与使用,如下所示:

npm install webpack -g
webpack main.js -o bundle.js

在上面命令行中,我们进行了简单的全局安装webpack和对main.js文件的打包操作

三. 项目构建

对前端项目来说,webpack扮演的是构建工具的角色,并不是代码依赖,应该被安装在dev-dependencies中,使用如下命令进行安装:

npm install webpack --save-dev

在这个示例中,将进行简单应用的构建,包括两个js模块

1.生成文本”Hello world”的hello模块(hello.js)

module.exports = 'Hello world';

2.打印文本的index.js模块(index.js)

var text = require('./hello');
console.log(text);

和用于在前端浏览器中显示内容的index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

在上面的src路径引入的bundle.js文件是不存在的,因为还没有创建,在使用webpack进行创建打包之后的js文件,如下面所示命令进行创建:

webpack ./index.js bundle.js

在执行完上面命令之后,我们就可以在浏览控制台中看到打印出的结果 Hello world

这样,我们就实现了简单项目的实现原理,打包内容为bundle.js,我们能够看到打包之后的内容,在这里就不贴代码了.

当然,如果我们写代码都是这样去构建,那么,作用意义也不大,这就不得不提及webpack的另外一个优点了,那就是配置文件的使用,在使用配置文件之前,我们在进行安装样式加载器,如下面命令:

npm install style-loader css-loader --save-dev

通过上面的配置,我们就能够进行样式的加载

然后我们进行webpack配置文件设置,需要首先在项目下创建文件webpack.config.js文件,其中内容如下所示:

var path = require('path');
module.exports = {
 entry: path.join(__dirname, 'index'),
 output: {
  path: __dirname,
  filename: 'bundle.js'
 },
 module:{
  loaders: [
   {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
   }
  ]
 }
};

在上面代码中,
* entry: 表示项目的入口文件
* output: 表示构建打包之后的结果输出,在输出的对象中仍有多项配置比如上面所使用的输出路径和输出文件名
* module.loaders是对于模块中的loader使用的配置,值为一个数组,数组的每一项指定一个规则,规则的test字段是正则表达式,若被依赖模块的ID符合该正则表达式,则对依赖进行使用loader转换.这样,我们就能够使用webpack命令进行代码的转换
更多详细说明请参见(https://3water.com/article/136710.htm)

如下面命令行命令就可以进行代码的打包工作webpack

通过执行上面命令,同样能够实现文件的打包,并且,在显示文件时也能够将样式进行显示,为了证明样式确实能够被引入,我们进行创建index.css文件,其中内容如下所示:

body {
  background-color: darkgray;
}

然后在我们之前创建的index.js中引入,修改之后的代码如下所示:

// import style from './index.css';
var style = require('./index.css');
var text = require('./hello');
console.log(text);

在上面代码中,注释掉的是node模块的导入形式,而使用中的是CommonJS的使用规范,使用同样的命令打包之后,我们能够在浏览器中看到如下效果:

基于打包工具Webpack进行项目开发实例 

也就是样式进行了展现.

当然,webpack也能够通过webpack-dev-server进行项目的实时构建.
使用如下命令进行webpack-dev-server的安装:

npm install webpack-dev-server --save-dev

在安装之后,我们能够配置使用服务器,首先,我们的package.json文件将会更为下面这样,新增内容为:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start":"webpack-dev-server --inline"
 },

在添加完这行命令之后,我们就可以使用下面命令进行启动webpack-dev-server服务器了,

npm run start

之后完整的package.json为如下:

{
 "name": "react-basics-review",
 "version": "1.0.0",
 "description": "a practise of react study ",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start":"webpack-dev-server --inline"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/suwu150/react-basics-review.git"
 },
 "author": "jkwu",
 "license": "ISC",
 "bugs": {
  "url": "https://github.com/suwu150/react-basics-review/issues"
 },
 "homepage": "https://github.com/suwu150/react-basics-review#readme",
 "devDependencies": {
  "babel-plugin-transform-object-rest-spread": "^6.23.0",
  "babel-preset-es2015": "^6.24.1",
  "css-loader": "^0.28.5",
  "lodash": "^4.17.4",
  "mocha": "^3.5.0",
  "react": "^15.6.1",
  "style-loader": "^0.18.2",
  "webpack": "^3.5.5",
  "webpack-dev-server": "^2.7.1"
 },
 "dependencies": {
  "lodash": "^4.17.4"
 }
}

webpack配置文件修改为如下内容:

devServer中常用的配置对象属性如下：

* 1. contentBase：”./” // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可；
* 2. historyApiFallback：true // 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html 页面；
* 3. inline：true // 用来支持dev-server自动刷新的配置，webpack有两种模式支持自动刷新，一种是iframe模式，一种是inline模式；使用iframe模式是不需要在devServer进行配置的，只需使用特定的URL格式访问即可；不过我们一般还是常用inline模式，在devServer中对inline设置为true后，当我们启动webpack-dev-server时仍要需要配置inline才能生效，这一点我们之后再说；
* 4. hot：true // 启动webpack热模块替换特性，这里也是坑最多的地方，不少博客都将hot设置了true，这里其实如果单单设置为true是不起作用,会报错误的,错误如下图所示:

基于打包工具Webpack进行项目开发实例 

这是因为在使用的过程中没有使用插件的原因,只需要将下面命令添加到配置文件即可:

plugins:[
  new webpack.HotModuleReplacementPlugin(),
 ],

也就是调用webpack的热模块插件处理.

*5 .port：端口号(默认8080) ；
*6.其他配置信息
?quiet 控制台中不输出打包的信息
?compress 开启gzip压缩
?progress 显示打包的进度
?open 自动打开浏览器

var path = require('path');
const webpack = require ("webpack");
module.exports = {
 entry: path.join(__dirname, 'index'),
 output: {
  path: __dirname,
  filename: 'bundle.js',
  publicPath: "/assets/",
 },
 module:{
  loaders: [
   {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
   }
  ]
 },
 plugins:[
  new webpack.HotModuleReplacementPlugin(),
 ],
 devServer:{
  //我们在这里对webpack-dev-server进行配置
  contentBase: "./",
  historyApiFallback:true,
  inline:true,
  hot:true
 }
};

index.html文件的内容修改为下面面格式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>身在山中不知山高</div>
<script src="assets/bundle.js"></script>
</body>
</html>

也就是将路径进行修改,因为在webpack.config.json文件中进行了服务器路径的配置,修改了 publicPath: "/assets/",项,在命令行执行npm run start能看到服务器正常启动,然后我们去浏览器进行访问,如下所示结果:

基于打包工具Webpack进行项目开发实例 

至此,我们完成了webpack实时构建的配置,当我们进行修改某一样式文件或者js文件的时候,项目就会重新打包,并且自动刷新加载到浏览器中.

如下面链接提示:,进行实时构建的搭建webpack-dev-server实时搭建

同时该项目使用的代码在github地址如下:github地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于打包工具Webpack进行项目开发实例

- Author -

suwu150

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
Jan 08 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
JavaScript反射与依赖注入实例详解
May 29 #Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 #Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 #Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 #Javascript
Vue 全局loading组件实例详解
May 29 #Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 #Javascript
详解vue-cli项目中怎么使用mock数据
May 29 #Javascript
希腊购物网站(6) 约旦购物网站(1) 白俄罗斯购物网站(3) 马耳他购物网站(1) 哈萨克斯坦购物网站(2) 乌克兰购物网站(27) 罗马尼亚购物网站(10) 保加利亚购物网站(3) 亚洲购物网站(6) 冰岛购物网站(1)
You might like
php引用传值实例详解学习
2013/11/06 PHP
php获取文件大小的方法
2014/02/26 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
JavaScript 组件之旅（四）：测试 JavaScript 组件
2009/10/28 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
微信小程序自定义组件
2017/08/16 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python批量修改图片大小的方法
2018/07/24 Python
python Tkinter的图片刷新实例
2019/06/14 Python
Python内存管理实例分析
2019/07/10 Python
python lambda表达式（匿名函数）写法解析
2019/09/16 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python构造函数init实例方法解析
2020/01/19 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
小学生期末自我鉴定
2014/01/19 职场文书
入职担保书怎么写
2014/05/12 职场文书
个人整改措施书面材料
2014/10/24 职场文书
会计工作能力自我评价
2015/03/05 职场文书
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers