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 的基本的构建流程图如下：

• 初始化 读取 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