记录升级Webpack5遇到的坑

1.eslint-loader改为eslint-webpack-plugin

plugins: [
      new ESLintPlugin({
        fix: true, // 启用ESLint自动修复功能
        extensions: ['js', 'jsx'],
        context: resolve('src'), // 文件根目录
        exclude: '/node_modules/',// 指定要排除的文件/目录
        cache: true //缓存
      })
    ]

2.内置file-loader和url-loader

{
              test: /\.(eot|svg|ttf|woff|woff2?)$/,
              type: 'asset/resource',
              generator: {
                filename: 'static/fonts/[hash][ext][query]'
              }
            },
            {
              test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
              type: 'asset/resource',
              generator: {
                filename: 'static/images/[hash][ext][query]'
              }
            }

3.本地启用devserver命令更改，webpack-dev-server改为webpack serve

"start":  "webpack serve --config build/webpack.dev.js --progress",

4. 不支持babel-polyfill，改用@babel/runtime-corejs3和@babel/plugin-transform-runtime

5.图片路径问题

webpack5生产环境需要使用mini-css-extract-plugin的loader，升级后发现背景图片不显示（img标签正常），排查发现是打包后相对路径出现问题，修改publicPath解决

• 修改前

{
     test: /\.(sa|sc|c)ss$/,
     use: [
         isEnvProduction ? MiniCssExtractPlugin.loader : 'style-loader',
         'css-loader',
         'postcss-loader',
         'sass-loader'
     ]
}

• 修改后

const cssLoader = () => {
  const loader = devModel ? 'style-loader' : {
    loader: devModel ? 'style-loader' : MiniCssExtractPlugin.loader,
      options: {
        publicPath: '../'  
    }
  }
  
  return [
    loader,
    'css-loader',
    'postcss-loader',
    'sass-loader'
  ]
}
// rule
{
   test: /\.(sa|sc|c)ss$/,
   use: cssLoader()
},

6. 部分页面报错，文件引用出现问题（大坑）

排查后发现是用了旧的插件出现问题
new webpack.optimize.ModuleConcatenationPlugin()
删掉OK

7.optimize-css-assets-webpack-plugin替换为css-minimizer-webpack-plugin

optimization: {
    moduleIds: 'deterministic',
    minimizer: [
      new CssMinimizerPlugin({
        parallel: true // 开启多线程压缩
      }),
    ]
}