前言
webpack 是一个现代 JavaScript 应用程序的静态模块打包器。webpack 执行构建后，会把所有 JavaScript 代码和第三方库打包成一个或多个 bundle。webpack 提供了许多配置选项，而 mode 是其中一个重要的选项，本文将探讨 webpack 配置中 mode 的两种模式以及优化。
mode
mode 是 webpack 配置中一个重要的选项，它决定了 webpack 打包的模式。mode 有三个取值：
development：为开发环境打包。production：为生产环境打包。none：不指定打包模式。
development 模式
在开发环境下，我们希望能够快速编译代码，同时也不需要将代码压缩，development 模式正好满足这个需求。在这个模式下，webpack 会提供一些开发相关的配置，比如：
- 禁用代码压缩
- 开启热更新
- 显示编译进度
- 增加源代码的可调试性
为了使 webpack 运行在 development 模式下，我们需要在配置文件中添加以下代码：
module.exports = {
mode: 'development',
// 其他配置
}production 模式
在生产环境中，我们希望代码能够运行地更快，同时尽可能地减小打包后的代码体积。production 模式正好满足这个需求。在这个模式下，webpack 会启用一些优化，比如：
- 代码压缩、混淆
- 去除调试信息
- 模块合并、去重
- 更小的 chunk 大小
为了使 webpack 运行在 production 模式下，我们需要在配置文件中添加以下代码：
module.exports = {
mode: 'production',
// 其他配置
}优化
webpack mode 的两种模式都提供了一些优化，但有时候我们需要更细粒度地控制打包过程，比如优化文件体积和加载速度。webpack 提供了许多优化选项，下面是一些常见的优化配置：
压缩 JS 和 CSS
webpack 默认只会压缩生产环境下的代码，如果希望在开发环境下也压缩代码，需要添加以下配置：
-- -------------------- ---- -------
----- ------------ - ---------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
-- ---
------------- -
--------- -----
---------- -
--- ---------------
--- --------------------------
--
--
--代码分离
为了提高页面加载速度，我们希望将代码分成多个 chunk 以便并行加载，可以使用 webpack 的 splitChunks 配置。splitChunks 使用默认值就能实现大部分的代码分离，当然也支持自定义配置。
-- -------------------- ---- -------
-------------- - -
-- ---
------------- -
------------ -
------- ------
----- ------
--
--
--按需加载
按需加载是指加载某些模块并非在一开始就全部加载，而是在代码需要时才加载。webpack 提供 import() 语法来实现按需加载。在使用 import() 时可以搭配 webpack 的 Magic Comments 来为生成的 chunk 命名：
import(
/* webpackChunkName: "my-chunk-name" */
'./path/to/module'
).then(module => {
// ...
});图片优化
优化图片可以减小打包后的体积，提高页面加载速度。可以使用 image-webpack-loader 和 url-loader 配置来处理图片和其他资源：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- -----------------------
---- -
-
------- -------------
-------- -
------ -----
--------- --------------
----------- ---------
--
--
-
------- -----------------------
-------- -
-------- -
------------ -----
-------- ---
--
-------- -
-------- ------
--
--------- -
-------- ------ -----
------ --
--
--------- -
----------- ------
--
----- -
-------- ---
--
--
--
--
--
--
--
--总结
通过本文的介绍，我们了解了 webpack 配置中的 mode 的两种模式及其优化。在实际项目中，合理地设置 mode 和优化选项可以为项目带来更好的性能和体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f02163f6b2d6eab3a12893