首先，基本礼仪，各位国庆节快乐！(*σ´∀`)σ

别问本咕为啥更新这东西，问就是因为没活整了，但是咕了吧又不好（不是

#关于开发模式和生产模式

在上一篇文章中，咱确确实实提到过有个东西叫做 mode ，这东西有俩值，一个是 development（开发模式），另一个是 production（生产模式）。

在开发以及调试阶段，我们会使用开发模式，开发时我们只关心代码能运行，能在浏览器上有效果即可，至于代码被编译成什么样子，我们并不需要知道。

同理，在代码即将上线时，我们会使用生产模式，将代码打包到最佳的状态，以使用户获得最好的体验。

那么这个时候，开发模式和生产模式之间就有明显的配置上的区别了，因此不能像以前一样共用一个 webpack.config.js 了，而是分开使用两个配置文件，分别为 webpack.dev.js 和 webpack.prod.js 来进行配置。

于是我们在 config 文件夹有以下俩文件了

webpack.dev.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 module.exports = {
   // ...
   mode: "development"
}

webpack.prod.js ：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
   // ...
   mode: "production"
}

同理，package.json 里的命令也该更换了：

"start": "npx webpack --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"

这样我们就可以用 npm start 运行开发模式，用 npm run build 运行生产模式了！

#开发服务器 | devServer

各位应该注意到一个问题：我们真正需要把打包好的代码输出到某目录的话，只是在生产模式才需要。

而如果在开发环境将打包好的代码输出到对应文件夹的话，会拖慢打包速度，我们开发起来一次一次在浏览器刷新也不方便。

于是，就有了这个东西 —— Webpack devServer，开发服务器！

顾名思义，开发服务器就是让你在开发时用的，它不会在本地产生输出，而是把打包的文件放在内存里，而且拥有类似 LiveServer 插件一样，可以通过 localhost 使浏览器实时效果预览打包后效果的功能。

首先安装 webpack-dev-server

npm i webpack-dev-server -D

接下来就在 webpack.dev.js 的最后添加这一项：

devServer: {
   host: "localhost" // 主机名，如果是 0.0.0.0 则可以被外部访问
   port: 3000, // devServer 的端口号
   compress: false // 是否压缩代码
}

而 package.json 中的开发模式命令就应该改成

"start": "npx webpack serve --config ./config/webpack.dev.js"

欸，然后运行，当提示 “Webpack xxx compiled successfully in xxx ms” 后，打开 http://localhost:3000（或你自己指定的端口号）

出现这一行字，说明编译成功

能够正常访问开发服务器

由于 Webpack 的 DevServer 能够实时更新已经修改的内容，所以只要不重名，不要给 CSS 或 JS 文件名带上 hash 值方便调试！

#怎么打包图片 / 字体等资源？

在 Webpack 5 以前，我们还需要安装 file-loader，然而现在 Webpack 5 帮我们内置了这个东西。所以我们如果要添文件，直接在 loader 里面写就是了！

要有在 CSS 或 JS 中引用，才能打包这个文件。

{
   test: /\.(jpg|png|woff2)$/, // 说明此 file-loader 作用于 jpg/png/woff2 文件上
   type: 'asset',
   generator: {
      filename: './static/res/[name].[ext]' // 输出路径
   }
}

首先引入要加载的文件

#简单了解 chunk

从官方的角度说，chunk 实际是 “一堆 module 的集合”，也就是 module 把源代码打包后相应的产物。通常，我们指定一个 entry，Webpack 就会顺着这个入口把所有资源打包，最后生成的就是 chunk。

换言之，我们知道代码最终会生成出一个 CSS 文件和一个 JS 文件，其实它们就是一个 chunk。

比如我们打包的这俩就是 chunk

#如何一次性打包多个 HTML 文件并应用不同的样式？

上面我们提到了，Webpack 会顺着 entry 里面打包，然后形成 chunk 并输出。

那么家人们，如果我有多个 entry，那就可能会产出多条打包路径，一条路径就会形成一个 chunk，这不就实现了嘛。

（是的，确实可以有多个 entry

那么就可以举栗子了 (˘︶˘)。我们写两个页面，创建两个入口文件，写两个不同的样式并分别在两个入口中引入。

首先在配置文件中引入两个 entry

entry: {
   1: "./src/1.js",
   2: "./src/2.js"
}

然后写俩入口：

// 1.js
import "./style/1.less"
 
// 1.less
// body { background: yellow; }
// * { color: #000; }

// 2.js
import "./style/2.less"
 
// 2.less
// body { background: green; }
// * { color: #fff; }

然后回到配置文件，因为有俩 HTML，所以需要 new 俩 HtmlWebpackPlugin。

// 1
new HtmlWebpackPlugin({
   template: path.resolve(__dirname, "../public/1.html"), // 源文件
   filename: "1.html", // 输出的文件
   chunks: ["1"] // 使用的 chunk
}),
 
// 2
new HtmlWebpackPlugin({
   template: path.resolve(__dirname, "../public/2.html"), // 源文件
   filename: "2.html", // 输出的文件
   chunks: ["2"] // 使用的 chunk
}),

#资源映射 | SourceMap

在开发过程中出现 bug 的时候，我们需要定位这个 bug 到底在哪里。

然而被打包成 chunk 之后，bug 出现在哪里反而不好找，因为控制台报错总是显示 chunk 中某一行。

这个时候我们就需要一个索引，能够显示源码及其路径，而资源映射呢就是专职做这玩意儿的。

而我们只需要像添加 devServer 一样，在 module.exports 中找空，卡进去

devtool: "(SourceMap的形式)"

SourceMap 有二十多种形式，咕咕个人建议在开发模式下用 cheap-module-source-map ，而在生产模式下用 source-map。

开发模式下的 cheap-module-source-map

生产模式下的 source-map

当然有更多想法的话你也可以自行搜索关于 SourceMap 的知识！

#生产模式小妙招

在打包过程中，各位肯定会遇到 dist 文件夹杂乱（即新旧文件一起存放）的情况。

那么我们要让 Webpack 先清理过去已经生成的文件，再输出文件。其实，只需要在 output 项中添加：

clean: true

#plugin 和 loader 的关系

最最最简单的理解，就是 loader 负责编译文件，而 plugin 负责把编译好的输出出来。比如输出 CSS 和 HTML 文件，就是 loader 先处理，然后通过 plugin 打包输出。

以下具体内容摘自知乎

loader 即为文件加载器，操作的是文件，将文件 A 通过 loader 转换成文件 B，是一个单纯的文件转化过程。 plugin 即为插件，是一个扩展器，丰富 Webpack 本身，增强功能 ，针对的是在 loader 结束之后，Webpack 打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听 Webpack 打包过程中的某些节点，执行广泛的任务。

（完结撒花🎉🎉🎉）