使用antd按需加載

使用react-app-rewired對 create-react-app 的默認配置進行自定義

1、yarn add react-app-rewired --dev

/* package.json */"scripts": {-  "start": "react-scripts start",+  "start": "react-app-rewired start",-  "build": "react-scripts build",+  "build": "react-app-rewired build",-  "test": "react-scripts test --env=jsdom",+  "test": "react-app-rewired test --env=jsdom",}

2.然后在項目根目錄創建一個 config-overrides.js 用于修改默認配置。

module.exports = function override(config, env) { // do stuff with the webpack config... return config;};

使用 babel-plugin-import

babel-plugin-import 是一個用于按需加載組件代碼和樣式babel 插件（原理），現在我們嘗試安裝它并修改config-overrides.js 文件

1.yarn add babel-plugin-import --dev

+ const { injectBabelPlugin } = require('react-app-rewired'); module.exports = function override(config, env) {+  config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);  return config; };

或者也可修改

{      test: //.(js|jsx|mjs)$/,      include: paths.appSrc,      loader: require.resolve('babel-loader'),      options: {       plugins: [        ['import', { libraryName: 'antd', style: true }],       ],       // This is a feature of `babel-loader` for webpack (not Babel itself).       // It enables caching results in ./node_modules/.cache/babel-loader/       // directory for faster rebuilds.       cacheDirectory: true,      },     },

自定義主題

yarn add react-app-rewire-less --dev

 const { injectBabelPlugin } = require('react-app-rewired');+ const rewireLess = require('react-app-rewire-less'); module.exports = function override(config, env) {-  config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);+  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);+  config = rewireLess.withLoaderOptions({+   modifyVars: { "@primary-color": "#1DA57A" },+  })(config, env);  return config; };

參考鏈接：https://ant.design/docs/react/use-with-create-react-app-cn

使用less

如果已經配置react-app-rewire-less，則無需再進行此操作

1.npm install less-loader less --save-dev
2.修改node_modules/react_script/config下的webpack.config.dev.js 和 webpack.config-prod.js 配置文件

{ test: //.(css|less)$/, use: [  require.resolve('style-loader'),  {   loader: require.resolve('css-loader'),   options: {    importLoaders: 1,   },  },  {   loader: require.resolve('postcss-loader'),   options: {    // Necessary for external CSS imports to work    // https://github.com/facebookincubator/create-react-app/issues/2677    ident: 'postcss',    plugins: () => [     require('postcss-flexbugs-fixes'),     autoprefixer({      browsers: [       '>1%',       'last 4 versions',       'Firefox ESR',       'not ie < 9', // React doesn't support IE8 anyway      ],      flexbox: 'no-2009',     }),    ],   },  },  {   loader: require.resolve('less-loader') // compiles Less to CSS  } ],},