Webpack 是前端开发中不可缺少的工具之一，它能够将多个文件打包成一个或多个文件并优化资源，使得页面加载速度更快、性能更好。而在 Webpack4 中，一个重要的改进就是引入了模式（mode）的概念，这个概念将有助于提高项目的开发效率和优化构建结果。
模式（mode）是什么？
Webpack4 对前一版进行了较大的升级，其中一个较为显著的新特性就是模式（mode）的引入。模式是一种可配置的选项，可以帮助开发人员将 Webpack 的行为切换到不同的模式中来，如开发模式、生产模式等。模式配置项主要有 development、production 和 none 三种值，分别对应开发模式、生产模式和不设置模式。
模式的作用
开发模式
在开发模式下，Webpack4 可以自动地为你启用很多有用的特性，比如：
- 代码热更新（Hot Module Replacement），可以即时修改代码并查看修改结果；
- 更加详细的错误日志和提示（比如你打错了代码拼写，Webpack4 会告诉你）；
- 常用模块（CommonsChunkPlugin）以及压缩等优化方式都不会被触发；
- 可以对模块打包成不同的 chunks，实现按需加载，以优化加载速度；
- 开启了 source map，可以在浏览器中对应到实际的源文件中。
在开发时，我们可以通过指定模式为 development，来启用这些特性，以获得更好的开发体验。
生产模式
在生产环境下，Webpack4 需要具备的能力与开发环境下是不同的，主要是要对代码进行混淆、压缩等操作，以减少代码量和提高加载速度。此时，我们可以将模式设置为 production。
在 production 模式下，Webpack4 将会开启一系列针对生产环境的内置优化。同时还会注重代码 size 优先，能够输出尽可能少的代码。
none 模式
如果你不想使用任何内置的优化，比如你想手动选择要用到的所有插件和工具等，那么可以将模式配置为 none，Webpack4 将不对代码进行任何额外的操作。这对于对打包结果考虑更加敏感的系统很有用，如测试。
示例代码
-- -----------------
----- ---- - ----------------
-------------- - ----- ----- -- -
----- --------- - --------- --- --------------
------ -
----- --------- - ------------- - -------------
-------- --------- - ------------------------------ - -------------
------ -----------------
------- -
----- ----------------------- --------
--------- --------- - ----------- - ------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -----
--
--
--
--
--
--
------------- -
--------- -----------
--
-------- -
-- ------ -------------------- -- ---------- ------------ ---- --- --
--------- - ---- - --- ----------------------
--------- -------------
---
------------- -- --------
--
--总结
Webpack4 的模式（mode）是一个十分重要的改进，它让我们可以在开发和生产环境下，更加灵活地配置 Webpack 的行为，使得构建过程更加高效、简洁。在实际开发中，请根据项目的实际情况来选择使用不同的模式，以达到最佳的性能和开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f2a8cbf6b2d6eab3c48f80