因为脚手架默认是隐藏webpack配置的,所以需要先运行npm run eject或yarn eject暴露配置文件,然后我们就可以开始升级了。
升级需要改动的文件包括分为package.js、 webpack.config.js、webpackDevServer.config 三处。
package.json 更新
主要是webpack相关包、babel相关包、react相关包、postcss相关包,直接贴对比图了。
webpack.config.js文件的更新
部分插件弃用
PnpWebpackPlugin、ManifestPlugin、WatchMissingNodeModulesPlugin、ModuleScopePlugin、typescriptFormatter,主要删除对应的配置。
部分配置弃用
output移除futureEmitAssets属性。
部分配置修改
output的filename修改。
IgnorePlugin配置写法更新。
postcss=loader写法更新,修改为下面的样子:
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
postcssOptions: {
ident: 'postcss',
config: false,
plugins:[
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
'postcss-normalize',
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
},
sourceMap: isEnvProduction && shouldUseSourceMap,
},
node配置移动到fallback,参考官网迁移指南。
WorkboxWebpackPlugin移除importWorkboxFrom和navigateFallbackBlacklist属性。
ForkTsCheckerWebpackPlugin 移除 formatter 属性。
[
](https://*.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined)
部分字段更名
ManifestPlugin 更名为 WebpackManifestPlugin 。
jsonpFunction 更名为 chunkLoadingGlobal 。
部分报错处理
报错process is not defined,解决方法:链接,这里注意一点,如果改完之后报错Cannot find module 'process/browser' ,需要安装node-libs-browser这个依赖。
我这里最终改完的webpack.config.js 完整文件如下,这里因为项目中使用less,所以