create-react-app配置按需引入antd、支持.less、打包输出的文件夹从build变成dist、打包后文件引用报错时地址的修改

create-react-app如何修改webpack配置一共有三种

第一种,执行eject不可逆的操作来保留配置文件，这个网上很多。

-----第二种,和第三种都是不执行eject的，在根目录下新建的config-overrides.js文件上做修改。

第二种【仅这种笔者提供确保可执行的代码】：

使用 react-app-rewired 插件，并在此基础上使用  customize-cra 插件,是笔者项目里所采用的。如果要添加对.less的支持，继续添加插件less与less-loader

const { override, fixBabelImports, addWebpackAlias ,addLessLoader} = require('customize-cra')
const path = require('path')
const paths = require('react-scripts/config/paths');
paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist');
function resolve(dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = override(
  // 配置路径别名
  addWebpackAlias({
    Pages: path.resolve(__dirname, 'src/Pages'),
    Mock: path.resolve(__dirname, 'src/Mock'),
    Static: path.resolve(__dirname, 'src/Static'),
    Utils: path.resolve(__dirname, 'src/Utils'),
    Layout: path.resolve(__dirname, 'src/Layout'),
  }),
  // antd按需加载：根据import来打包 (使用babel-plugin-import)
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
   使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
  //yarn add less less-loader --save-dev
  addLessLoader({
    javascriptEnabled: true,
    modifyVars:{'@primary-color':'#1DA57A'},
  })
  // ,(config)=>{ //暴露webpack的配置


      
  //   return config
  // }
)

第三种（未经笔者测试）：

使用 react-app-rewired 插件，但不使用  customize-cra 插件,网络上也有很多博客有介绍，之前笔者很困惑为什么会有config-overrides.js会有两种写法，原因也就是有没有使用customize-cra ,如果要添加对.less的支持，可以使用react-app-rewire-less

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);
   // alias
config.resolve.alias = {
    ...config.resolve.alias,
    '@': resolve('src')
};
   return config;
 };

第三种写法可以阅读react-app-rewired的官方文档https://github.com/timarney/react-app-rewired/blob/master/README_zh.md

而第二种写法是在react-app-rewired基础上加了customize-cra插件，可以阅读官方文档https://github.com/arackaf/customize-cra#readme

 

如果打包后文件引用地址报错，修改package.json,添加一行

"homepage": "./",

 

 

此外一些未提到的配置写法以及一些参考博客如下：(以下标题仅代表笔者个人收获)

未经核实的修改打包方法+不使用customize-cra:http://www.manongjc.com/article/77258.html

creat-react-app在配置config-overrides.js后如何修改打包路径:https://blog.csdn.net/qq_38998250/article/details/103470055

不使用customize-cra的基础上配置快捷引用:https://www.onlyling.com/archives/321

不使用customize-cra的基础上使用react-app-rewire-less来配置:https://www.cnblogs.com/lanshu123/p/10660705.html

使用customize-cra后如何暴露config:https://www.cnblogs.com/crazycode2/p/12584669.html

掘金的一则create-react-app综合问题:https://juejin.im/post/5ca5bd0ee51d4564221c4cf3