在 Webpack4 中，mode 模式被引入以便根据不同的开发环境以及需求自动的确定打包方式和优化策略，进一步简化了 Webpack 的配置过程。本文将详细探讨 Webpack4 中的 mode 模式，包括其作用及使用场景，希望能对前端开发者有所帮助。
mode 模式
在 Webpack4 中，可以通过设置 mode 为以下其中之一来确定打包的方式和优化策略：
- development
- production
- none （不会开启任何默认行为）
mode 模式会影响 Webpack 的内置插件和优化策略，比如在 production 模式下，Webpack 会开启 Tree Shaking（摇树优化）等高级优化策略。
使用场景
development
在开发阶段，我们可以设置 mode 为 development，这样 Webpack 会将代码尽可能地打包成可读性更好的格式，方便我们开发调试。同时，在此模式下，不会对代码进行压缩混淆等优化，也可以开启一些对于开发有帮助的插件，如 Hot Module Replacement (HMR) 等。
示例代码：
module.exports = {
mode: 'development',
// ...其他配置
};production
当我们部署在生产环境中时，一般会选择将 mode 设置为 production，因为在这个模式下 Webpack 会自动帮我们进行打包优化，并将代码压缩混淆，从而减小代码体积，提高页面加载速度。同时，此模式下也可以开启一些生产环境特有的插件和优化策略。
示例代码：
module.exports = {
mode: 'production',
// ...其他配置
};none
如果我们不期望 Webpack 做任何类型的自动优化，在配置时可以将 mode 置为 none 模式。这个模式下，我们需要显式地指定需要做的优化，比如压缩混淆等操作，但是也允许我们使用 Webpack 内置的一些辅助插件。
示例代码：
module.exports = {
mode: 'none',
// ...其他配置
};总结
通过对 Webpack4 中 mode 模式的详细讲解，我们了解到 mode 代表不同的打包模式和优化策略，并且可以根据不同的开发阶段指定不同的模式。使用 mode 能够简化 Webpack 的配置，也帮助开发者更加清晰的知道 Webpack 进行了哪些自动优化与配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c49fde83d39b488181532e