修改webpack配置

1.可使用eject暴露出webpack的配置

　虽然扩展了 webpack 配置，但是再也享受不到 CRA 升级带来的好处了。因为react-scripts已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。

2.可使用react-app-rewired

例子是qiankun的微应用使用less

（1）安装相关的依赖 less相关版本推荐如下，避免一些奇怪问题

?

1 2 3

npm install react-app-rewired --save-dev npm install customize-cra --save-dev npm install less@3.11.3 less-loader@6.1.0 --save-dev

　（2）新建confg-overrides.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

const { name } = require('./package.json'); const { override, addLessLoader, overrideDevServer, watchAll } = require(   'customize-cra');   const { NODE_ENV, REACT_APP_ROUTER_PATH } = process.env;   module.exports = {   webpack: override(     (config) => {       config.output.library = `${name}-[name]`;       config.output.libraryTarget = 'umd';       config.output.globalObject = 'window';       config.output.publicPath = NODE_ENV === 'production' ? `${REACT_APP_ROUTER_PATH}/` : '';       return config;     },       /** 增加代码 **/     addLessLoader({       lessOptions: {         javascriptEnabled: true,       },     }),     /** 增加代码 **/   ),     devServer: overrideDevServer(     (config) => {       config.open = false;       config.hot = false;       config.headers = { 'Access-Control-Allow-Origin': '*' };       return config;     },     watchAll(),   ),   };

　遇到的问题：

PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'plugins'. These properties are valid:
github搜到的解决方案，亲测有效，增加如下配置

?

1 2 3 4

adjustStyleLoaders(({ use: [, , postcss] }) => {     const postcssOptions = postcss.options;     postcss.options = { postcssOptions };   }),