一、使用构建工具原因：
(1) 解决JavaScript和CSS的依赖问题
(2)性能优化(合并和压缩文件)
(3)提高开发效率（Vendor前缀、单元测试、代码分析、版本升级）
二、什么是webpack？
ebpack是一个模块打包器（bundler）。
在webpack的概念中，前端的所有资源文件（js/css/json/img/sass/less/...）都会作为模块来被处理，webpack会根据模块的依赖关系进行静态分析，生成对应的静态资源，最终打包部署上线。
微信截图_20181227161544.png
loader
webpack本身只能加载js/json模块，如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。
loader 可以将所有类型的文件转换为webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
loader自身也是运行在node.js环境中的JavaScript模块，其本身是一个函数，接收源文件作为参数，返回转化的结果。
loader一般以 xxx-loader 的方式命名，xxx代表了这个loader要做的转化功能，比如：css-loader，json-loader等。
插件
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
可以完成一些loader不能实现的功能；
使用插件一般在webpack的配置信息plugins选项中指定
UglifyJSPlugin: 压缩js文件
HtmlWebpackPlugin: 自动生成HTML文件
CleanWebpackPlugin: 自动清除指定文件夹资源
三、操作
3.1初始化项目
新建webpack_demo工程文件，并进行初始化：
npm install webpack -g //全局安装
npm install webpack webpack-cli --save-dev //局部安装
安装后，初始化：
npm init -y
3.2打包项目中的js和json文件
（一）新建单个js文件，如下图所示：
微信截图_20181227161544.png
打开命令行执行打包代码：
webpack src/js/main.js --output dist/js/bundle.js --mode development
微信截图_20181227161544.png
打包成功后，你就可以引入bundle.js，其执行效果和引入main.js一样，在开发过程中，我们就可以把多个js文件都打包到bundle.js中，这样客户端请求资源就由多次变成一次。
运行结果：
微信截图_20181227161544.png
3.3 新建多个js和json文件，如下图所示：
新建多个js文件，并在main.js中引入并调用。
微信截图_20181227161544.png
运行结果：
微信截图_20181227161544.png
新建多个json文件，并在main.js中引入并调用，如下图所示：
微信截图_20181227161544.png
3.4 在webpack中使用配置文件
新建 webpack.config.js 文件，写入相关配置信息，在终端直接执行webpack即可打包
微信截图_20181227161544.png
3.5 打包项目中的css
首先安装并添加style-loader 和 css-loader 模块：
npm install css-loader style-loader --save-dev
然后进入webpack.config.js中配置loader选项：
微信截图_20181227161544.png
创建main.css文件，写入样式，并在main.js中引入，然后通过webpack命令打包，如下图所示:
微信截图_20181227161544.png
运行结果:
微信截图_20181227161544.png
3.6打包项目中的图片文件
首先安装并添加 file-loader 模块：
npm install file-loader --save-dev
然后进入webpack.config.js中配置loader选项：
微信截图_20181227161544.png
引入图片文件，在index.html中创建标签，在css文件中的样式里面使用图片背景，执行webpack打包到bundle.js文件，如下图所示：
微信截图_20181227161544.png
运行结果：
微信截图_20181227161544.png
3.7 自动编译打包
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)
(一) 下载安装
npm install --save-dev webpack-dev-server
(二） 修改配置文件
在webpack.config.js告诉开发服务器(dev server)，在哪里查找文件：
微信截图_20181227161544.png
以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
(三）package配置
增加"start": "webpack-dev-server --open"选项。
微信截图_20181227161544.png
(四）编译打包应用并运行
npm start
微信截图_20181227161544.png
当功能开发完毕后，关掉服务器，执行webpack打包成本地文件即可。
四、 webpack中各种插件的使用
（一） HtmlWebpackPlugin
该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。
npm install --save-dev html-webpack-plugin
在项目中引入，进入webpack.config.js文件中，增加如下配置：
微信截图_20181227161544.png
删除掉原先打包编译生成的dist文件夹，重新执行webpack，该插件会自动根据指定的模板页面帮助我们创建index.html文件，并做好相关配置引入，如下图所示：
微信截图_20181227161544.png
此篇文章特别感谢 叶建华 [旋之华]，推荐大家关注旋之华公众号，从里面学习到了很多好东西，赞！
网友评论