升级webpack5过程中遇到的坑

忘是亡心i 2022-10-27 15:49 483阅读 0赞

将项目的weback从3升到了5，遇到了一系列的问题，这里记录两个：

1.  extract-text-webpack-plugin兼容问题
2.  webpack-dev-server兼容问题

## 1.extract-text-webpack-plugin兼容问题 ##

升到webpack5后，运行打包直接报错，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]

原因是：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"  
    },

最后成功运行起来。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/4a00c4b250194c52aa573ef2b25a0990.png