React项目升级到Webpack 5

create-react-app还没有更新对Webpack 5的支持,正好最近有空,自己动手升级一下。我的项目比较小,webpack.config.js和CRA eject出来的初始配置文件区别不大,大概花了半个小时弄好。

官方升级文档:https://webpack.js.org/migrate/5/

完整的webpack.config.js

https://gist.github.com/f32by/b7245f57a88011443151836738816243

要点

Terser Plugin中的sourceMapcache已经被移除,需要删除这两个选项;

module.rules中的eslint-loader 已经被弃用,将这段改用eslint-webpack-plugin。附上我的配置:


// npm i eslint-webpack-plugin -D
const ESLintPlugin = require> ('eslint-webpack-plugin')

plugins: [
  // ...
  new ESLintPlugin({
    cache: false,
    eslintPath: require.resolve> ('eslint'),
    extensions: ['js', 'jsx', 'ts', > 'tsx'],
    files: 'src',
    formatter: 'stylish',
    ignore: true,
    useEslintrc: true,
  }),
  // ...
]

Webpack 5不再auto-polyfill Node.js的模块,建议删除node配置项。有相关需求的可以看看这个Issue