umi 如何配置webpack_前端负责人教你使用 Webpack

1 Webpack 有什么特点？

图片来源于网络

Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系，根据依赖关系将这些模块打包成一个或多个文件。

目前几乎所有的前端构建和开发都是采用 Webpack 。因为 Webpack 有强大的社区生态，每月 Webpack 的下载量超过百万。通过 loader、plugin 支持 Webpack 与主流的前端框架和语言进行集成，比如 Vue、React、TypeScript。

那么，Webpack 有什么特点？

• 支持所有的模块化可以对 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 你需要知道哪些核心概念？

1. 入口

入口是 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'

}

};

2. 输出

配置 output 选项可以指示 Webpack 如何去输出、在哪里输出我们的静态资源文件。

我们通过一个例子来看一下 output 如何使用：

// webpack.config.js

module.exports = {

output: {

filename: 'bundle.js',

path: './dist'

}

};

上例中，我们指示 Webpack 最终的输出文件名为 bundle.js，输出的目录为 ./dist。

3. 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' }