简介
Webpack 是一款适用于前端开发的打包工具，用于将多个编译后的文件打包成一个或多个文件。通过使用 Webpack，前端开发人员可以很方便地创建出高效且运行速度更快的 JavaScript 应用程序。
本文将介绍 webpack 配置的妙用，包括常见配置选项和常用插件的使用。
常见配置选项
entry
entry 是 Webpack 配置中的一个必须项，它指定了需要打包的 JavaScript 应用程序入口文件。entry 的值可以是一个字符串，也可以是一个对象，当值为对象时，每一个键值对都代表一个入口文件。
例如：
module.exports = {
entry: {
main: './src/index.js'
}
}这个配置文件中的 entry 内容指定了打包文件的入口为 ./src/index.js，并将打包后生成的文件命名为 main。
output
output 配置项用于指定 Webpack 打包后生成的文件的存放位置。output 的值也可以是一个字符串或对象，用于指定文件名、文件夹路径等相关信息。
例如：
-- -------------------- ---- -------
-------------- - -
------ -
----- ----------------
--
------- -
--------- ------------
----- ----------------------- -------
-
-这个配置文件中的 output 内容指定了打包文件的文件名为 bundle.js，并将打包后生成的文件存放在 dist 文件夹中。
mode
mode 用于设置 Webpack 的打包模式。mode 可选值为 'none'、'development' 或 'production'。
在 'production' 模式下，Webpack 会自动开启各种优化功能，提升打包后 JavaScript 应用程序的运行效率。
在 'development' 模式下，Webpack 会关闭各种优化功能，提供更为清晰的错误提示和更好的调试能力。
devServer
devServer 配置项用于指定 Webpack 打包后的文件在开发环境下运行的服务器地址和端口号等相关信息。
例如：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
------------ -------------------- --------
--------- -----
----- -----
----- ----
-
-这个配置文件中的 devServer 内容指定了打包文件的地址为 dist 文件夹，并在本地的 9000 端口上启动一个服务器，浏览器会自动打开应用程序的首页。
常用插件的使用
HtmlWebpackPlugin
HtmlWebpackPlugin 用于将打包后生成的 JavaScript 文件自动引入 HTML 文件中。通过 HtmlWebpackPlugin，我们可以无需手动修改 HTML 文件中的链接，而是在打包后自动将 JavaScript 文件引入到 HTML 中。
例如：
-- -------------------- ---- -------
-------------- - -
-- ---
-------- -
--- -------------------
------ --- -----
--------- ----------------
--
-
-这个配置文件中，我们在 plugins 中使用了 HtmlWebpackPlugin 插件，通过指定 template 来告诉插件使用哪一个 HTML 文件作为模板。
UglifyJsPlugin
UglifyJsPlugin 用于将打包后的 JavaScript 文件压缩，减小文件体积，提高应用程序的加载速度。
例如：
module.exports = {
// ...
plugins: [
new UglifyJsPlugin()
]
}这个配置文件中，我们在 plugins 中使用了 UglifyJsPlugin 插件，用于压缩打包后生成的 JavaScript 文件。
示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------- - -----------------------------------
-------------- - -
------ -
----- ----------------
--
------- -
--------- ------------
----- ----------------------- -------
--
----- -------------
---------- -
------------ -------------------- --------
--------- -----
----- -----
----- ----
--
-------- -
--- -------------------
------ --- -----
--------- ----------------
---
--- ----------------
-
--结论
Webpack 是一款十分强大的前端打包工具，通过使用 Webpack，我们可以自动地将多个文件打包到一个或多个文件中，并且对于常见的插件和配置选项，我们也应该熟练掌握和使用，在日常的前端开发中为自己带来更为高效和便捷的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e5f54e884a3e30f258d29