随着前端项目复杂度的增加，其所依赖的资源也越来越多，从最初的HTML文件，CSS文件，JS文件发展到现在的各种预处理文件，模板文件等等。文件多了，项目大了，项目的维护就变得更加困难了，用户加载页面的速度也变得更慢了。在这样的背景下，webpack 应运而生，webpack 的主要作用是资源的整合，打包，压缩。使用 webpack，它会自动构建一个项目资源之间的依赖关系图，其中包含项目需要的所有模块，然后把这些资源全部整合打包成一个或多个（根据需要）bundle（包）。
一 准备工作
1，安装 nodejs
在使用 webpack 之前，我们需要做一些准备工作。由于 webpack 工具是基于 nodejs 开发的，所以我们应该首先在电脑上安装它。
nodejs 下载地址：https://nodejs.org/en/；根据自己的操作系统下载安装即可。
装好后它会在你的电脑上创建一个系统命令：node。使用如下命令可以常看当前安装的 node 版本号，如果能正常查看，那么你的 nodejs 就已经安装成功了。
1 node -v
2，npm
通常情况下，安装 nodejs 会自动安装 npm 工具。npm 工具可以理解成一个平台，安装好后它会在你的电脑上创建一个系统命令：npm。这个工具的主要作用是：在命令行模式下，使用该命令从NPM服务器下载一些包（各种框架等）。
同样的，使用命令 npm -v 也可以查看当前安装的 npm 工具版本号。如果查到了，那么证明这个工具也安装成功了。
npm有下面一些常用的命令（在项目目录下使用）：
1 npm init
初始化项目，执行该命令后会有很多配置项，可以根据需要填写，也可以在命令后面添加 -y 参数，使用默认配置。初始化完成后，项目目录下会多一个 package.json 文件，这个文件记录了该项目的所有配置信息，如果你不想使用默认的配置了，那么你随时可以到这里来修改相关项。
1 npm install
根据 package.json 配置文件，自动配置项目，并加载项目依赖的包。
1 npm install 'bundle'
安装(下载)你需要的包。比如你需要使用jQuery，你可以使用如下命令：npm install jquery。默认该命令会安装最新版的包，你也可以通过 @ 符号指定版本，比如：npm install [email protected]。包安装完成后，项目目录下又会多一个node_modules 的目录，这个目录中存放的就是你安装的所有包。
1 npm uninstall ‘bundle’
移除已安装的包。
1 npm list
查看项目安装了哪些包。
1 npm info ‘bundle’
查看包的详情。
使用npm命令安装包时，有以下一些可选参数：
-S 或 --save：包作用于生产环境。
-D 或 --save-dev：包作用于生产环境和开发环境（常用）。
-g 或 --global：全局安装。
如果不带参数 -g 则默认本地安装，即安装在当前项目下。如果使用了全局安装。你可以使用npm root -g 查看全局安装的目录位置。
小技巧：npm默认下载服务器是国外的，有时候速度难免有点慢，这时你可以使用淘宝在国内的镜像平台，有两种方式实现：第一种，安装cpmn，npm install cnpm -g。第二种，修改默认下载路径，npm config set registry https://registry.npm.taobao.org。
3，自定义命令
package.json 文件中有一个 scripts 选项，该选项用于自定义 npm 命令，比如稍后我们要讲到的 webpack 命令：
1 "scripts":{ 2 "bundle":'webpack' 3 } 4 //现在你可以使用 bundle 命令来替代 webpack 了
自定义命令的使用方式和原始命令有所区别：
1 npm run bundle 2 #通过 npm run 来启动自定义命令
二 webpack
1，安装
知道了怎么通过 npm 安装包，那么接下来我们就要学习如何安装 webpack 了，其实也很简单，直接使用命令：
1 npm install webpack -g
通常 webpack 使用全局安装，即使用参数 -g 。安装成功后可以通过如下命令查看当前安装的 webpack 版本号：
1 webpack -v
但有时候我们还是希望为某项目单独使用特定版本的 webpack 工具，这时你可以选择本地安装，即不指定参数 -g，它会被安装到 node_modules 目录下 。但本地安装会有一个问题：webpack 命令不能正常使用了。幸好，nodejs 为我们提供了 npx 命令，以在不修改全局目录的情况下使用 webpack 命令。
1 npx webpack -v
2，简单使用
webpack 工具安装成功后，你就可以使用 webpack 命令对项目文件进行打包处理了，命令使用方式也很简单：
1 webpack ‘url被打包文件’
文件打包成功后默认会在项目中新建一个目录 dist，里面会有一个和被打包文件同名的文件，这就是打包之后生成的了。
3，配置文件
如果希望使用更多 webpack 提供的功能，你需要使用配置文件 webpack.config.js。该文件向外暴露一个对象，供 nodejs 使用，nodejs 根据这个配置对象来决定如何打包文件。
配置文件有四个核心，他们分别是：入口（entry）、输出（output）、加载器（loader）、插件（plugins）。文件的基本结构如下：
1 module.exports = { //node 语法，向外暴露一个对象 2 entry: '', 3 output:{}, 4 module:{ 5 rules:[] 6 }, 7 plugins:[] 8 };
entry 规定 webpack 从哪里开始打包，并构建内部依赖关系图。它的值是一个相对路径，一般指向一个具体的文件。比如当前项目目录下的 main.js：
1 entry: './main.js'
output 则是规定 webpack 输出内容的配置对象，通常它需要两个属性：filename（输出文件的名称）和 path（输出路径）：
1 const path = require('path');//node 的一个 path 模块 2 module.exports = { 3 output:{ 4 filename:'main.bundle.js', 5 path:path.resolve('__dirname','dist') 6 //通过 path 模块的 resolve 方法，在项目根目录下生成一个 dist 目录，这也是 node 的语法，有兴趣的可以去学习 node，这里只是介绍 webpack，所以不深究 7 } 8 }
module 用于指定 loader。由于 webpack 只认识 JS 文件，当碰到项目中需要打包其他文件，比如 CSS 文件，图片，txt 文件或者其他编程语言文件等等，这时候就需要用到 loader了。loader 用于对模块的源代码进行转换，以便浏览器最终能够认识他们。
1 module: { 2 rules: [ 3 { test: /\.css$/, use: 'css-loader' }, 4 { test: /\.ts$/, use: 'ts-loader' } 5 ] 6 } 7 //每条规则通过 test 来判断打包的是什么类型的文件，如果匹配成功，将使用本规则 use 所指定的 loader。
事实上，每条规则可以使用多个 loader，这时 use 需要用数组来保存它们。每个 loader 都有不容的作用，也有一些不尽相同的可选项，如果需要，请查看 webpack 官方文档 LOADER。
plugins 用于配置 webpack 插件，这些插件可以在打包的不同阶段完成一些功能。比如 HtmlWebpackPlugin 插件，它的作用是在打包完成后，在输出目录自动生成一个 HTML 文件，并把打包好的文件引入该 HTML 文件中，下面是它的用法：
1 var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 var webpackConfig = { 3 plugins: [new HtmlWebpackPlugin({ 4 filename:'index.html', 5 template:'src/test.html' 6 })] 7 };
先在配置文件中引入插件，然后在 plugins 中创建插件实例，创建实例的时候可以给一个配置对象，指定生成的文件名称，和使用什么样的 HTML 模板等。
注意：loader 和 plugin 都需要使用 npm 先安装到本地才能如上述方式使用。
4，常用 loader 介绍
在一般项目中，最常用的 loader 包括 url-loader 和 （style-loader & css-loader）。前者用于图片打包，后者用于样式打包。
url-lorder 用法如下：
1 module:{ 2 rules:[ 3 test:/\.(jpg|png|gif)$/, //正则用于匹配图片资源 4 use:{ 5 loader:'url-loader', 6 options:{ 7 name:'[name].[ext]', //占位符用于指定图片的名称和后缀名 8 limit:2048, //规定图片大于2048字节则打包到指定目录（下面的outputPath），否则以Base64编码形式直接打包到输出 js 文件中 9 outputPath:'images/' //单独指定图片文件指定输出路径 10 } 11 } 12 ] 13 }
样式 loader 用法：
1 module:{ 2 rules:{ 3 test:/\.scss$/, 4 use:[ 5 'style-loader', // 通过