webpack 是一个打包工具，它可以将各种前端资源（CSS、JS、图片等）进行打包和优化，减少页面的 HTTP 请求次数，提高页面性能。在 webpack 的配置中，有几个重要的选项，分别是 entry、output、mode。在本文中，我们将详细介绍这三个选项的配置及其作用。
Entry
Entry 是 webpack 打包的入口。它告诉 webpack 从哪个模块开始打包。一个入口可以是一个或多个模块的组合，也可以是一个依赖关系的根节点。
在 webpack 的配置文件中，可以使用对象、数组或字符串来配置 Entry。
对象配置
对象配置是最灵活的方式，可以为每个入口设置名字和路径。
------ - ----- ---------------- ------- ----------------- -
上面的配置表示，有两个入口，分别是 main 和 vendor，它们的路径分别为 ./src/main.js 和 ./src/vendor.js。
数组配置
数组配置可以将多个模块打包成一个模块，但是并不常用。
------ ----------------- ------------------
上面的配置表示，将 ./src/main.js 和 ./src/vendor.js 两个模块打包成一个模块。
字符串配置
字符串配置表示只有一个入口。
------ ----------------
上面的配置表示，只有一个入口，路径为 ./src/index.js。
Output
Output 是 webpack 打包后输出的文件，它告诉 webpack 打包后的文件存放位置及文件名。在 webpack 的配置文件中，可以使用对象来配置 Output。
------- - ----- ----------------------- -------- --------- ------------------- ----------- --- -
上面的配置表示，打包后的文件将会存放在 ./dist 目录下，文件名为 name.bundle.js，其中 name 会被替换为入口的名称，即 main.bundle.js 和 vendor.bundle.js。此外，publicPath 是资源的公共路径，可以用于 CDN 等场景。
Mode
Mode 是 webpack 的模式，它可以控制打包后的文件是否压缩，是否自动优化代码等。webpack 4.x 引入了 Mode 的概念，提供了三种模式：development、production 和 none。
Development
在 Development 模式下，webpack 打包的文件不会被压缩，打包后的代码将保留完整的注释和操作符，从而方便调试和定位错误。
----- -------------
Production
在 Production 模式下，webpack 打包文件将被压缩，同时自动移除未使用的代码以及无用的注释。
----- ------------
None
在 None 模式下，webpack 不会对打包文件进行任何优化和压缩，适用于一些特殊的场景。
----- ------
示例代码
下面是一个完整的 webpack 配置示例代码。
----- ---- - ----------------
-------------- - -
------ -
----- ----------------
------- -----------------
--
------- -
----- ----------------------- --------
--------- -------------------
----------- ---
--
----- -------------
-总结
本文从 entry、output、mode 三个方面详细讲解了 webpack 的配置，并给出了示例代码。合理地配置打包工具可以大大提高页面性能和开发效率，希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b8fb5fadd4f0e0ff187640