1、安装
pnpm install html-webpack-externals-plugin customize-cra react-app-rewired
2、在项目根目录下新建config-overrides.js文件,package.json中改为react-app-rewired 启动和打包,如下
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },
3、config-overrides.js中使用插件
const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin"); const addCustomize = () => (config) => { config.plugins.push( new HtmlWebpackExternalsPlugin({ externals: [ { module: "react", //打包需要忽略的文件,不打包进去,使用cdn的文件 entry: "https://cdn/react.production.min.js", //cdn公共库插件地址 global: "React", //全局上的名称,可以通过window.React调用 }, ], }) ); return config; }; module.exports = override(addCustomize());
4、打包部署到线上测试