随着前端技术的发展，webpack作为一款强大的打包工具也在不断更新迭代。在webpack2.X的版本中，我们已经可以通过配置文件来管理项目的打包流程。但是，webpack3.X版本的推出，为我们带来了更多的新特性和优化，例如Scope Hoisting、Tree Shaking等。在升级过程中，我们也遇到了一些问题，本文将会介绍一些常见的问题以及解决方案。
问题一：webpack.optimize.CommonsChunkPlugin已经被移除
在webpack2.X中，我们可以使用webpack.optimize.CommonsChunkPlugin插件来提取公共代码，以便减小打包后的文件大小。但是，在webpack3.X版本中，这个插件已经被移除了。
解决方案：
我们可以使用新的配置项optimization.splitChunks来代替webpack.optimize.CommonsChunkPlugin插件。下面是一个示例代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-----
------------- -
------------ -
------- -----
-
-
--上面的代码中，我们使用optimization.splitChunks来提取公共代码。其中，chunks: 'all'表示提取所有的公共代码，包括同步和异步的代码。
问题二：webpack.optimize.UglifyJsPlugin已经被移除
在webpack2.X中，我们可以使用webpack.optimize.UglifyJsPlugin插件来压缩打包后的代码。但是，在webpack3.X版本中，这个插件也已经被移除了。
解决方案：
我们可以使用新的配置项optimization.minimize来代替webpack.optimize.UglifyJsPlugin插件。下面是一个示例代码：
// webpack.config.js
module.exports = {
//...
optimization: {
minimize: true
}
};上面的代码中，我们使用optimization.minimize来压缩打包后的代码。
问题三：ExtractTextWebpackPlugin已经被废弃
在webpack2.X中，我们可以使用ExtractTextWebpackPlugin插件来将CSS提取到单独的文件中，以便进行缓存和优化。但是，在webpack3.X版本中，这个插件已经被废弃了。
解决方案：
我们可以使用新的配置项optimization.minimizer来代替ExtractTextWebpackPlugin插件。下面是一个示例代码：
-- -------------------- ---- -------
-- -----------------
----- -------------------- - -----------------------------------
-------------- - -
-----
------------- -
---------- -
--- ----------------------
--------- ------------
--
-
--
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
-
--上面的代码中，我们使用MiniCssExtractPlugin插件来将CSS提取到单独的文件中。其中，filename: '[name].css'表示生成的文件名为[name].css，这里的[name]会自动替换成模块的名称。
总结
在升级webpack2.X至webpack3.X的过程中，我们遇到了一些问题，但是通过使用新的配置项和插件，我们可以很容易地解决这些问题。通过学习本文，我们可以更好地了解webpack3.X版本的新特性和优化，以便更好地管理我们的前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bc5388add4f0e0ff4fff18