Webpack 是一个非常流行的前端打包工具，它可以将各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，以便于在浏览器中使用。Webpack 4 是最新的版本，它与 Webpack 3 相比有许多改进和提升。然而，在升级到 Webpack 4 时需要注意以下几个方面。
1. NPM 包的更新
Webpack 4 需要配合一些新版的 NPM 包使用，因此在升级前需要更新相关的包。以下是一些需要更新的包：
npm install webpack webpack-cli --save-dev npm install html-webpack-plugin --save-dev npm install mini-css-extract-plugin --save-dev npm install webpack-dev-server --save-dev
如果以前的项目中使用了 Webpack 3 相关的包，需要先将其删除，才能安装 Webpack 4 相关的包。
2. 配置文件的修改
Webpack 4 的一些参数与 Webpack 3 有所不同，需要对配置文件进行相应的修改。以下是一些常用的修改方法：
2.1 entry 和 output
entry 和 output 是 Webpack 配置文件中最基本的选项，它们用来指定入口和输出文件的路径。在 Webpack 3 中，可以这样配置：
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};而在 Webpack 4 中，需要使用新的语法：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ------------
----- ----------------------- -------
-
--其中，entry 现在是一个对象，而不是一个路径字符串。可以指定多个入口文件，每个文件对应一个输出文件。例如，可以这样配置多个入口文件：
entry: {
app: './src/index.js',
login: './src/login.js',
register: './src/register.js'
}output.filename 支持占位符 [name]、[hash]、[chunkhash] 等，可以将输出文件名与入口文件名对应，避免重名。例如，上面的配置会分别产生 app.js、login.js 和 register.js。
2.2 module.rules
在 Webpack 3 中，使用 module.rules 配置加载器（Loader）来处理不同类型的文件，例如：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- ---------
---- -
---------------
------------
-
--
-
----- -----------------------
---- -
-------------
-
-
-
-
--而在 Webpack 4 中，需要将 rules 改为 rules，使用数组形式：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- ---------
---- -
----------------------------
------------
-
--
-
----- -----------------------
---- -
-
------- --------------
-------- -
----- ----------------------
----------- ---------
-
-
-
-
-
-
--其中，MiniCssExtractPlugin.loader 可以提取 CSS 文件并以link形式加载到HTML中。
2.3 插件的变化
在 Webpack 3 中，使用 plugins 选项配置插件，例如：
-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- ---------------------------------
--------- -
--------- -----
-
---
--- -------------------
------ -------- -----
--
-
--在 Webpack 4 中，插件的使用方式存在以下变化：
new webpack.optimize.UglifyJsPlugin()已经被删除，可以使用mode: 'production'来启用压缩。- HtmlWebpackPlugin 需要添加 minify 选项来压缩 HTML。
修改后的配置文件如下：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-------- -
--- -------------------
--------- -------------------
------- -
--------------- -----
------------------- ----
-
--
-
--3. 性能的优化
Webpack 4 相对于 Webpack 3 在性能上有很大的提升，但也需要进行一些优化，以便更好地使用 Webpack。
3.1 使用 Tree Shaking
Webpack 4 增加了对 ES6 模块语法的支持，可以通过 Tree Shaking 剔除未使用的模块代码。只需要在 package.json 中加入以下配置即可：
// package.json "sideEffects": false
3.2 使用 SplitChunksPlugin
如果项目中需要使用大量的第三方依赖库，可以将它们单独打包成一个文件。这样可以减少每个页面的加载时间。Webpack 4 提供了 SplitChunksPlugin 插件来实现这个功能，只需要在配置文件中添加以下选项：
// webpack.config.js
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};这个配置将会把所有的公共代码打包到 vendors.js 中。
3.3 使用缓存机制
Webpack 4 增加了对缓存的支持，可以通过以下配置启用缓存机制：
// webpack.config.js
module.exports = {
cache: true
};这样在重复构建时可以提高速度。
总结
Webpack 4 在许多方面都有所改进，但也需要注意升级过程中需要修改的配置文件和插件，以及如何优化 Webpack 性能。在实际开发中，可以根据项目需要来更改具体的配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a66af348841e9894306d22