webpack2.X 升级至 webpack3.X 遇到的问题（一）-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的发展，webpack作为一款强大的打包工具也在不断更新迭代。在webpack2.X的版本中，我们已经可以通过配置文件来管理项目的打包流程。但是，webpack3.X版本的推出，为我们带来了更多的新特性和优化，例如Scope Hoisting、Tree Shaking等。在升级过程中，我们也遇到了一些问题，本文将会介绍一些常见的问题以及解决方案。

问题一：webpack.optimize.CommonsChunkPlugin已经被移除

在webpack2.X中，我们可以使用webpack.optimize.CommonsChunkPlugin插件来提取公共代码，以便减小打包后的文件大小。但是，在webpack3.X版本中，这个插件已经被移除了。

解决方案：

我们可以使用新的配置项optimization.splitChunks来代替webpack.optimize.CommonsChunkPlugin插件。下面是一个示例代码：

// webpack.config.js

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

上面的代码中，我们使用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插件。下面是一个示例代码：

// webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [
      new MiniCssExtractPlugin({
        filename: '[name].css'
      })
    ]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  }
};

上面的代码中，我们使用MiniCssExtractPlugin插件来将CSS提取到单独的文件中。其中，filename: '[name].css'表示生成的文件名为[name].css，这里的[name]会自动替换成模块的名称。

总结

在升级webpack2.X至webpack3.X的过程中，我们遇到了一些问题，但是通过使用新的配置项和插件，我们可以很容易地解决这些问题。通过学习本文，我们可以更好地了解webpack3.X版本的新特性和优化，以便更好地管理我们的前端项目。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bc5388add4f0e0ff4fff18