直接上手撸，将webpack，webpack-cli都升级为最新版

通过node --trace-deprecation node_modules/webpack/bin/webpack.js命令去寻找项目中存在的弃用警告,拿的是webpcak.config.js所以拆分出去的不同环境可以根据配置手动的去搜素

像我们直接修改defaultConfig就可以拿到不同的配置去检测

将package.json里的依赖包都升级到最新版

可以使用npm-check-updates

 npm install -g npm-check-updates
 ncu -u
 npm install

升级完依赖，根据运行中的报的错将依赖包的用法更新成最新版。但是尝试了一下依赖包实在是太多了，很容易出问题

用depcheck可以找出无用的依赖包，但是我们拆分成的配置文件好像无用，当然这个只是为了清理一下。毕竟不用也不会报错。。。。

更改

cssLoader

cssloader用法更改配置从

{
  // using the extension .module.css // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
  importLoaders: 1,
  modules: true,
  camelCase: 'dashes',
  getLocalIdent({resourcePath}, localIdentName, localName) {
    return generateScope(localName, resourcePath);
  }
}

变成

{
    importLoaders: 2,
    modules: {
      exportLocalsConvention: 'dashes',
      getLocalIdent({resourcePath}, localIdentName, localName) {
        return generateScope(localName, resourcePath);
      }
    }
}

小型的url-loader，raw-loader，file-loader也改掉了，变成了 资产模块,根据自己当初的配置，可以选择对应的类型和配置

{
    test: /\.(png|jpg|jpeg)$/,
    use: [{loader: 'url-loader', options: {limit: 8192}}]
}

{
    test: /\.(png|jpg|jpeg)$/,
    type: 'asset'
}

我直接更改是因为官网提到小于8kb会自动做处理，当然你也可以通过parser自己做转换

output输出问题

运行的时候报了下面的问题，看起来是命名路径的问题

参照官网移出废弃的值，将output中的filename移除即可

 output: {
    path: '/assets',
    // filename: "[name].js",
    publicPath: '/',
    pathinfo: false
  }

TerserWebpackPlugin

webpack v5 自带最新的 terser-webpack-plugin,所以删除该配置即可，可参考官网

HashedModuleIdsPlugin

HashedModuleIdsPlugin → optimization.moduleIds: 'deterministic'

但是webpack5的 HashedModuleIds插件和之前的是一个作用

webpack4:

optimization.splitChunks

optimization.splitChunks.name 发生了更改，不再接收true

webpack4

webpack5

devtools

好吧devtools的内容也改版了，开发环境用的从cheap-module-eval-source-map变成了eval-cheap-module-source-map

webpack-dev-middleware

之前设置了 quiet: true 向控制台显示任何内容，但是版本5已经废弃了

http-proxy-middleware发生改变

// const proxyMiddleware = require('http-proxy-middleware');
const { createProxyMiddleware } = require('http-proxy-middleware');

可参照document配置

样式挂载问题

打包完成的文件样式出现问题，经排查，文件已打包挂载，class也挂载成功，但是class生成的值和打包生成的css的类名对应不上

经查找在cssloader里配置了生成的名称,可以怀疑是[hash:base64:5]出现了问题

{
     test: stylModuleRegex,
     use: getStyleLoaders(
       {
         importLoaders: 2,
         modules: {
           exportLocalsConvention: 'dashes',
           getLocalIdent({resourcePath}, localIdentName, localName) {
             return generateScope(localName, resourcePath);
           }
         }
       },
       'stylus-loader'
     )
}

 const localIdentName = '[name]__[local]-[hash:base64:5]';
 
 const generateScope = genericNames(localIdentName, {
   context: process.cwd()
 });

因为配合使用了babel-plugin-react-css-modules插件，所以需要排查是插件生成问题，还是css-loader的问题

经查阅github.com/gajus/babel… 发现babel-plugin-react-css-modules使用的generic-names是2.0，而webpack5使用的是3.0，之前就按第一种解决方法尝试过，然而并不好使，所以采取的第二种方法，在package.json中添加resolutions覆盖嵌套的依赖版本

"resolutions": {
   "generic-names": "^3.0.0"
}

webpack指令

打包的时候发现--display-error-details废弃了，可以使用以下命令查看webapck支持的指令

npx webpack --help

还有就是-env的传值方式发生了变化原先直接把你定义的值字符串给传到方法中

现在拿到的是一个对象

升级webpack5