Webpack2 升级到 Webpack3 后的坑及解决方案-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中常用的模块打包工具，它可以将多个模块打包成一个文件，减少了网络请求次数，提高了页面加载速度。Webpack2 是一个稳定版本，但是随着技术的不断发展，Webpack3 已经发布了，我们需要及时升级，以便更好地应对项目开发中的需求。本文将介绍在升级 Webpack2 到 Webpack3 过程中可能遇到的坑以及解决方案。

坑1：uglifyjs-webpack-plugin 版本过低

在使用 Webpack2 时，我们通常会使用 uglifyjs-webpack-plugin 插件来压缩代码。但是在升级到 Webpack3 后，可能会遇到以下错误：

Module build failed: TypeError: Cannot read property 'minify' of undefined

这个错误是因为 uglifyjs-webpack-plugin 的版本过低导致的，需要升级到 1.0.0 或以上的版本。

解决方案：

// 安装最新版本的 uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin@1.7.0 --save-dev

坑2：extract-text-webpack-plugin 插件失效

在使用 Webpack2 时，我们通常会使用 extract-text-webpack-plugin 插件来将 CSS 提取到单独的文件中。但是在升级到 Webpack3 后，可能会遇到以下错误：

Module build failed: TypeError: Cannot read property 'tap' of undefined

这个错误是因为 extract-text-webpack-plugin 的版本过低导致的，需要升级到 3.0.0 或以上的版本。

解决方案：

// 安装最新版本的 extract-text-webpack-plugin
npm install extract-text-webpack-plugin@3.0.2 --save-dev

坑3：webpack.optimize.CommonsChunkPlugin 插件被废弃

在使用 Webpack2 时，我们通常会使用 webpack.optimize.CommonsChunkPlugin 插件来提取公共代码。但是在升级到 Webpack3 后，这个插件被废弃了，需要使用新的插件。

解决方案：

// javascriptcn.com 代码示例
// 使用新的插件 webpack.optimize.SplitChunksPlugin
optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all'
      }
    }
  }
}

坑4：webpack-dev-server 配置变化

在使用 Webpack2 时，我们通常会使用 webpack-dev-server 来启动本地服务。但是在升级到 Webpack3 后，webpack-dev-server 的配置也发生了变化。

解决方案：

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  compress: true,
  port: 9000
}

总结

Webpack3 的升级相对来说比较顺利，只需要注意一些细节问题就可以了。我们需要及时升级到最新版本，以便更好地应对项目开发中的需求。希望本文能够帮助大家顺利升级 Webpack2 到 Webpack3，避免因为版本问题而浪费时间和精力。

示例代码

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new ExtractTextPlugin('styles.css'),
    new UglifyJSPlugin(),
    new webpack.optimize.SplitChunksPlugin({
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

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