解析webpack3升级到webpack4版本遇到的问题（总结）

答案： 随着Webpack 4的发布，许多开发者已经开始考虑将他们的项目迁移到最新版本。在进行这一步之前，你需要了解在从Webpack 3升级到Webpack 4时可能会面临哪些问题。

对于那些没有使用任何插件或自定义配置文件来扩展Webpack功能的用户而言，升级应该是相当平滑和简单的。但是如果你已经在当前项目中使用了很多定制化配置以及各种常见插件，则需要花费更长时间来完成整个过程。

下面我们将介绍几个常见问题：

1. Webpack CLI 命令行工具更新

Webpack CLI 工具现在支持 webpack-dev-server 和 webpack-hot-middleware 这两个选项。所以如果你正在使用这些选项，请确保安装了最新版本的CLI，并检查所有相关命令是否正确执行。

2. Mode 模式变化

mode属性现在是必填项，默认值为production。在development模式下会启用NamedChunksPlugin和NamedModulesPlugin插件(即使没有明确添加它们)。

3. CommonsChunkPlugin被废弃

CommonsChunkPlugin 被移除并替换成 optimization.splitChunks 和 optimization.runtimeChunk 选项。这两个新选项提供了更好的性能和灵活性，但是需要在升级过程中进行一些调整。

4. UglifyJSPlugin 被移除

UglifyJSPlugin 已经被废弃，并由内置的 TerserWebpackPlugin 替代。TerserWebpackPlugin 提供了与之前版本相同的功能，同时还支持 ES6+。

5. Module.rules 变化

Module.rules 现在是必填项，并且它不再接受字符串类型。现在只有对象数组才可以传递给 module.rules 。如果你使用一个单独的规则，请将其包装到一个数组中以确保向后兼容性。

6. MiniCssExtractPlugin 插件更新

MiniCssExtractPlugin 插件已经更新为 v0.4.x ，并且现在要求 webpack 版本大于或等于 4.x 。插件现在默认启用 sourceMap 属性（除非显式地设置为 false）。