升級webpack5過程中遇到的坑

將項目的weback從3升到了5，遇到了一系列的問題，這裏記錄兩個：

1. extract-text-webpack-plugin兼容問題
2. webpack-dev-server兼容問題

1.extract-text-webpack-plugin兼容問題

升到webpack5後，運行打包直接報錯，如下：

原因是：webpack4以上的版本不再使用“extract-text-webpack-plugin”，應該改成用“mini-css-extract-plugin”

解決

原代碼：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  plugins: [
     new ExtractTextPlugin({ filename:'[name].css', disable: false, allChunks: true })
  ],
  module: {
    loaders: [      
        {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
               fallback:'style-loader',               
               use:'css-loader!less-loader'          })
      }
    ]
  }
}

改爲：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

2.webpack-dev-server兼容問題

在npm run dev 啓動服務的時候報錯

原因是：目前webpack-dev-server版本不支持webpack5.0和webpack-cli4.0

解決方案

修改package.json中的配置

原代碼：

"scripts": {    
        "dev": "webpack-dev-server --config webpack.config.dev.js",    
        "build": "webpack --config webpack.config.prod.js"  
},

改爲：

"scripts": {    
     "dev": "webpack serve --mode development --env development --config webpack.config.dev.js",    
     "build": "webpack --config webpack.config.prod.js"  
},

最後成功運行起來。