create-react-app webpack4升级webpack5

因为脚手架默认是隐藏webpack配置的,所以需要先运行npm run eject或yarn eject暴露配置文件,然后我们就可以开始升级了。

升级需要改动的文件包括分为package.js、 webpack.config.js、webpackDevServer.config 三处。

package.json 更新

主要是webpack相关包、babel相关包、react相关包、postcss相关包,直接贴对比图了。
create-react-app webpack4升级webpack5
create-react-app webpack4升级webpack5
create-react-app webpack4升级webpack5

webpack.config.js文件的更新

部分插件弃用

PnpWebpackPlugin、ManifestPlugin、WatchMissingNodeModulesPlugin、ModuleScopePlugin、typescriptFormatter,主要删除对应的配置。

部分配置弃用

output移除futureEmitAssets属性。

部分配置修改

output的filename修改。
create-react-app webpack4升级webpack5
IgnorePlugin配置写法更新。
create-react-app webpack4升级webpack5
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,所以

上一篇:MySQL 8 -- Functional Indexes


下一篇:Qt编写的项目作品10-RTSP播放器+视频监控(android版本)