React-create-app不eject配置项目

Posted 2021-12-04 zling-gnilz

React-create-app without eject

Customize-cra文档：https://github.com/arackaf/customize-cra#readme

文档不是很详细，也可以查看源码文件中的方法。

根目录添加 config-overrides.js 文件用来扩展配置

首先参考https://ant.design/docs/react/use-with-create-react-app-cn 

可以实现基本需求，包含：按需引入，加入Less 

目前用到的大致如下：( 可以参考项目：https://github.com/zlinggnilz/react-multi-level-form )

const { override, fixBabelImports, addDecoratorsLegacy, addLessLoader, addWebpackAlias } = require(‘customize-cra‘);

const path = require(‘path‘);

module.exports = override(
  addDecoratorsLegacy(),
  addWebpackAlias({
    ‘@‘: path.join(__dirname, ‘.‘, ‘src‘),
  }),
  fixBabelImports(‘import‘, {
    libraryName: ‘antd‘,
    libraryDirectory: ‘es‘,
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    // modifyVars: { ‘@primary-color‘: ‘#0da6f5‘ },
    localIdentName: ‘[path][name]-[local]‘,
  })
);