Webpack 是前端开发中不可或缺的工具，它能够将多个模块打包成一个或多个 bundle 文件，同时还能对代码进行压缩、优化、分离等操作。Webpack 的新版本 Webpack4 相比于旧版本带来了更多的功能和优化，但也有一些需要注意的变化和踩坑点。本文将详细介绍 Webpack4 升级所需注意的事项，并提供相应的示例代码。
1. 安装
Webpack4 的安装方式和旧版本没有区别，可以使用 npm 或 yarn 进行安装。
npm install webpack webpack-cli --save-dev
或
yarn add webpack webpack-cli --dev
2. 配置
Webpack4 的配置文件与旧版本的有一些不同，主要表现在以下几个方面：
2.1 模式 Mode
Webpack4 新增了一个 Mode 模式，它有两个可选值：development 和 production。这个模式会自动设置一些配置项，例如开启/关闭压缩、优化等。
module.exports = {
mode: 'development',
// ...
}2.2 压缩 Optimization
Webpack4 新增了一个 Optimization 配置项，用于配置优化选项。其中包括了常见的代码压缩、代码分离、Tree Shaking 等优化功能。
-- -------------------- ---- -------
-------------- - -
------------- -
--------- ----- -- ------
------------ -
------- --------
-------- ------
-------- --
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
--
-- ---
-2.3 入口 Entry
Webpack4 中，入口配置项可以是一个字符串，也可以是一个对象。
module.exports = {
entry: {
main: './src/index.js',
vendor: './src/vendor.js'
},
// ...
}2.4 输出 Output
Webpack4 新增了一个 filename 配置项的占位符 [contenthash]，用于在文件名中添加 hash 值，以防止文件缓存问题。同时，chunkFilename 配置项也有了变化。
module.exports = {
output: {
filename: '[name].[contenthash].js', // 添加 hash 值
chunkFilename: '[name].[contenthash].js' // 添加 hash 值
},
// ...
}2.5 Loader
Webpack4 中 Loader 配置项的写法与旧版本相同，但是需要注意的是，一些常用 Loader 的名称也有了变化。例如，原来的 url-loader 现在被替换成了 url-loader/limit。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- -------------
-------- -
------ -----
----- ----------------------
----------- --------
-
-
-
-
-
--
-- ---
-3. 插件
Webpack4 中常用的插件基本与旧版本相同，但是需要注意的是，一些插件的名称也有了变化。例如，原来的 UglifyJsPlugin 现在被替换成了 terser-webpack-plugin。
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new TerserPlugin()]
},
// ...
}4. 总结
Webpack4 相比于旧版本带来了更多的功能和优化，但也有一些需要注意的变化和踩坑点。在升级 Webpack4 时，需要注意模式 Mode、优化 Optimization、入口 Entry、输出 Output、Loader 和插件等方面的变化。本文提供了相应的示例代码，希望能够帮助读者顺利升级 Webpack4。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6515677d95b1f8cacdddb9de