注：文章转载自 《透视前端工程化》
这个系列是我自己购买的课程内容，把比较干货的试读章节放在我的上，作为个人Mark。但其他篇目因为版权问题不好直接放，所以感兴趣的小伙伴们自取吧。
1 Webpack 的特点
Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系，根据依赖关系将这些模块打包成一个或多个文件。
目前几乎所有的前端构建和开发都是采用 Webpack 。因为 Webpack 有强大的社区生态，每月 Webpack 的下载量超过百万。通过 loader、plugin 支持 Webpack 与主流的前端框架和语言进行集成，比如 Vue、React、TypeScript。
- 支持所有的模块化 可以对 ES6 模块、commonjs 模块、AMD 模块等所有标准的模块进行打包。
- code splitting 可以将代码打成多个 chunk，按需加载，意味着我们的站点无需等待整个 js 资源下载完成之后才能交互，可以大大提升速度。
- 强大灵活的插件系统 Webpack 提供了很多内置的插件，包括其自身也是架构在插件系统上可以满足所有的打包需求。
- loader 借助 loader 预处理非 js 资源，Webpack 可以打包所有的静态资源。
2 Webpack 构建流程
Webpack 的构建流程是一种事件流机制。整个构建流程可以看成是一个流水线，每个环节负责单一的任务，处理完将进入下一个环节。Webpack 会在每个环节上发布事件，供内置的和自定义的插件有机会干预 Webpack 的构建过程，控制 Webpack 的构建结果。Webpack 的基本的构建流程图如下：
graph LR
A(初始化)-->B(开始编译)
B(开始编译)-->C(编译模块)
C(编译模块)-->D(编译完成)
D(资源输出)-->E(完成)
- 初始化 读取 webpack 配置文件和 shell 脚本中的参数，将参数合并后初始化 Webpack ，生成
Compiler对象。 - 开始编译 执行
Compiler的 run 方法开始执行编译。 - 编译完成 从入口文件开始，调用配置中的 loader 对模块进行编译，并梳理出模块间的依赖关系，直至所有的模块编译完成。
- 资源输出 根据入口与模块间的依赖关系，将上一步编译完成的内容组装成一个个的
chunk（代码块），然后把chunk加入到等待输出的资源列表中。 - 完成 确定好输出资源后，根据指定的输出路径和文件名配置，将资源写入到磁盘的文件系统中，完成整个构建过程。
3 核心概念
入口
入口是 Webpack 进行构建的起点，Webpack 在构建过程中从入口文件开始，递归地编译模块，并分析模块间的依赖关系，最终得出依赖图。Webpack 依据该依赖图对模块进行组装，输出到最终的 bundle 文件中。
我们可以在Webpack 的配置文件中配置 entry 属性，来指定入口文件，入口文件可以是一个也可以指定多个。
我们来看一个例子：
// Webpack .config.js
module.exports = {
entry: './src/app.js'
};
配置多个入口的场景常见于多页应用中。如果配置多个入口可以这样：
// Webpack .config.js
module.exports = {
entry: {
pageOne: './src/pageOne/app.js',
pageTwo: './src/pageTwo/app.js'
}
};
输出
配置 output 选项可以指示 Webpack 如何去输出、在哪里输出我们的静态资源文件。
我们通过一个例子来看一下 output 如何使用：
// Webpack .config.js
module.exports = {
output: {
filename: 'bundle.js',
path: './dist'
}
};
上例中，我们指示 Webpack 最终的输出文件名为 bundle.js ，输出的目录为 ./dist。
loader
loader 的使用
Webpack 本身是不能处理非 js 资源的，但我们却可以在 Webpack 中引入 css、图片、字体等非 js 文件。例如:
// app.js
import Styles from './styles.css';
那么 Webpack 是如何实现的呢？
Webpack 中使用 loader 对非 js 文件进行转换。loader 可以在我们 import 或者加载模块时，对文件进行预处理，将非 js 的文件内容，最终转换成 js 代码。
loader 有三种使用方式：
- 配置 在 Webpack .config.js 文件中指定
- 内联 在每个
import语句中线上指定 - CLI 在 shell 命令中指定。
在实际的应用中，绝大数都是采用配置的方式来使用，一方面在配置文件中，可以非常直观地看到某种类型的文件使用了什么 loader，另一方面，在项目复杂的情况下，便于进行维护。
我们通过一个简单的例子来看一下 loader 的使用：
// Webpack .config.js
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' }
]
}
};
我们需要告诉 Webpack 当遇到 css 文件的时候，使用 css-loader 进行预处理。这里由于 css-loader 是单独的 npm 模块，使用前我们需要先进行安装：
npm install --save-dev css-loader
常用的 loader
Webpack 可以处理任何非 js 语言，得益于社区提供的丰富的 loader，日常开发中所使用到的 loader，都可以在社区找到。这里对一些常用的 loader 进行简要的说明。
- babel-loader 将 ES2015+ 代码转译为 ES5。
- ts-loader 将 TypeScript 代码转译为 ES5。
- css-loader 解析
@import和url()，并对引用的依赖进行解析。 - style-loader 在 HTML 中注入
通过以上完整的示例，我们演示了 Webpack 的核心的几个配置的使用方式，我们对 Webpack 的使用应该有了一个基本的认识。
Webpack 中还有很多其他有用的配置项，篇幅原因不做详细的介绍。大家可以查阅 官方文档自行配置和练习。
总结
本节我们对 Webpack 进行了总体的介绍。借助 loader、Webpack 可以处理一切资源，JS 的、非 JS 的，都可以。
通过插件，我们可以在 Webpack 的构建过程中的每个事件节点加入自己的行为，来影响 Webpack 的构建。对 Webpack 的使用有了认识后，接下来我们要以之为基础搭建起项目的基本框架。
点击了解《透视前端工程化》。
作者简介：
王超，现任快狗打车（原58速运）前端负责人。
先后任职于人人网、奇虎360，8 年知名互联网工作经验。
从 0 到 1 组建了快狗前端团队，负责团队技术体系的搭建，形成了以 Webpack 和 Vue 为基础、 Node.js 中间层为补充的，自动化、工程化、组件化的快狗前端技术体系。