Webpack 是一个流行的前端打包工具，它可以将多个 JavaScript 文件打包成一个或多个文件，以及处理其他类型的文件，例如 CSS、图片和字体。Webpack4 是 Webpack 的最新版本，它引入了许多新功能和改进，并解决了一些旧版本中存在的问题。本文将介绍如何升级到 Webpack4，并避免一些常见的 “陷阱” 和问题。
升级到 Webpack4
升级到 Webpack4 可能需要一些时间和精力，因为它引入了一些重大的变化。以下是升级步骤：
1. 更新 Webpack 和相关依赖项
首先，您需要更新 Webpack 和相关依赖项。您可以使用以下命令更新 Webpack：
--- ------- --------- ----------
然后，您需要更新其他依赖项，例如 webpack-cli 和 webpack-dev-server：
--- ------- ----------- ------------------ ----------
2. 更新配置文件
Webpack4 引入了一些新的配置选项，并且某些选项已被重命名。您需要更新您的配置文件以适应这些更改。以下是一些可能需要更新的选项：
mode：Webpack4 引入了mode选项，用于指定构建模式。它有两个值：development和production。在development模式下，Webpack 将优化构建速度和开发体验。在production模式下，Webpack 将优化代码质量和文件大小。您需要在配置文件中指定mode选项：
-------------- - - ----- ------------- -- --- --
optimization：Webpack4 引入了optimization选项，用于配置优化选项。您可以使用optimization.splitChunks选项来将公共模块拆分为单独的文件，以减少每个文件的大小。您可以使用optimization.minimize选项来启用代码压缩。您需要在配置文件中指定optimization选项：
-------------- - -
------------- -
------------ -
------- -----
--
--------- ----
--
-- ---
--plugins：Webpack4 引入了一些新的插件，例如MiniCssExtractPlugin和OptimizeCSSAssetsPlugin。您需要更新您的配置文件以使用这些新插件：
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
-------------- - -
-------- -
--- -----------------------
--- -------------------------
--
-- ---
--3. 更新 Loader 配置
Webpack4 引入了一些新的 Loader 和更新了一些旧的 Loader。您需要更新您的 Loader 配置以适应这些更改。以下是一些可能需要更新的 Loader：
babel-loader：Webpack4 中的babel-loader需要@babel/core和@babel/preset-env作为 peerDependency。您需要更新您的依赖项以包含这些包，并更新您的 Loader 配置：
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-- ---
--css-loader和style-loader：Webpack4 中的css-loader和style-loader已经更新了。您需要更新您的依赖项以包含这些包，并更新您的 Loader 配置：
-------------- - -
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-- ---
--避免常见的 “陷阱” 和问题
在升级到 Webpack4 过程中，可能会遇到一些常见的 “陷阱” 和问题。以下是一些可能会遇到的问题，以及如何避免它们：
1. 无法找到模块
在升级到 Webpack4 后，您可能会遇到以下错误：
------ --- ------ ------ ----- ------- --------
这是因为 Webpack4 中有一些更改，例如默认情况下不再解析 node_modules 中的所有模块。您可以通过在配置文件中添加以下选项来解决此问题：
-------------- - -
-------- -
-------- ----------------
--
-- ---
--2. MiniCssExtractPlugin 不起作用
在使用 MiniCssExtractPlugin 时，您可能会遇到以下错误：
---------- ------ ---- -------- ----- -- ---------
这是因为 MiniCssExtractPlugin 不再支持 extract-text-webpack-plugin。您需要更新您的配置文件以使用 MiniCssExtractPlugin：
----- -------------------- - -----------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--
-- ---
--3. 代码压缩不起作用
在使用 UglifyJSPlugin 压缩代码时，您可能会遇到以下错误：
---------- -------------- -- --- - -----------
这是因为 UglifyJSPlugin 不再是 Webpack4 的默认压缩插件。您可以使用 optimization.minimize 选项启用默认压缩插件：
-------------- - -
------------- -
--------- ----
--
-- ---
--或者，您可以使用 terser-webpack-plugin 作为替代品：
----- ------------ - ---------------------------------
-------------- - -
------------- -
---------- ---- ---------------
--
-- ---
--示例代码
以下是一个使用 Webpack4 的示例配置文件：
----- ---- - ----------------
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
----- ------------ - ---------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
--
-
----- ---------
---- -
----------------------------
------------
-
--
-
----- -----------------------
---- -
-------------
-
-
-
--
-------- -
--- -----------------------
--- -------------------------
--
------------- -
------------ -
------- -----
--
---------- ---- ---------------
-
--结论
升级到 Webpack4 可以带来许多好处，例如更好的性能和更好的开发体验。但是，升级过程中可能会遇到一些问题。本文介绍了如何升级到 Webpack4，并避免一些常见的 “陷阱” 和问题。希望这篇文章能够帮助您更好地使用 Webpack4。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673d8ad2de2dedaeef3a9a4e