修改webpack配置

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

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

2.可使用react-app-rewired

例子是qiankun的微应用使用less

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

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

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搜到的解决方案，亲测有效，增加如下配置

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