随着前端技术的不断发展，webpack 作为前端打包工具也随之发展并不断推出新版本。webpack 4 是其中的一个比较重要的版本，它带来了更好的性能和更好的处理方式，包括缓存和 Tree Shaking 等方面的优化。然而，在升级到 webpack 4 的过程中，也会遇到一些问题和坑。本文将对升级过程中的问题进行详细讲解，并提供有深度的学习和指导意义。
1. 升级过程
1.1 建议先升级 webpack 3
在升级 webpack 4 之前，建议先升级到更稳定的 webpack 3. 通过这个过渡，可以先看看自己的代码会遇到哪些问题，从而有备无患。
1.2 安装 webpack 4
可以通过如下命令安装 webpack 4：
npm install webpack@4.0.0 --save-dev
1.3 升级 webpack-cli
webpack-cli 是一个单独的命令行工具，需要单独升级到最新版本。
npm install webpack-cli@3.1.0 --save-dev
1.4 升级 webpack-dev-server
如果你使用 webpack-dev-server 来进行开发，也需要对其进行升级。
npm install webpack-dev-server@3.1.0 --save-dev
2. 升级后的问题
2.1 output.path 问题
在 webpack 4 中，output.path 要求必须是绝对路径。如果你直接使用相对路径，会得到如下错误：
Error: Child compilation failed:
Output path is not absolute解决方法是使用 path 模块将相对路径转换为绝对路径，比如：
const path = require('path');
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}2.2 CommonsChunkPlugin
在 webpack 4 中，CommonsChunkPlugin 被移除了，取而代之的是 optimization.splitChunks 选项。例如下面的配置将同时对异步和非异步的模块分离 chunk。
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}2.3 MiniCssExtractPlugin
在 webpack 4 中，ExtractTextPlugin 被废弃了，取而代之的是 MiniCssExtractPlugin。
npm install mini-css-extract-plugin --save-dev
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- -----------
--
-
-2.4 Tree Shaking
webpack 4 对 Tree Shaking 进行了大幅度优化，大部分代码都可以直接使用。如果你的代码中还存在一些问题，可以通过使用 sideEffects 选项来关闭 Tree Shaking。
module.exports = {
optimization: {
sideEffects: false
}
};结论
通过本文的学习，我们可以深入了解 webpack 4 升级过程中的问题和解决方法。在遇到问题时，我们需要结合自身业务需求，合理选用合适的打包工具，遵循最佳实践，及时更新技术栈，从而提升项目的性能和整体质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f95168c5c563ced5c3dc17