create-react-app webpack4升级webpack5

因为脚手架默认是隐藏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写法更新，修改为下面的样子：

代码语言：javascript复制

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://stackoverflow.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，所以