Create-react-app中如何进行对webpack的配置

Create-react-app中如何进行对webpack的配置

安装 yarn add react-app-rewired customize-cra

react-app-rewired 在不eject也不创建额外的react-scripts的情况下修改 create-react-app内置的webpack配置，拥有一切create-react-app的一切特性

替换package.json的scripts 为

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

然后在项目目录创建config-overrides.js 用于修改默认配置。

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

使用最新的 react-app-rewired 要安装customize-cra,安装后的config-overrides.js写法

const { 
 override, 
 fixBabelImports,   
 addDecoratorsLegacy,
 disableEsLint,
 addBundleVisualizer,
 addWebpackAlias,
 adjustWorkbox,
 addLessLoader,
 useBabelRc 
} = require('customize-cra');
const path = require("path");

module.exports = override(
  //按需加载
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
 }),
  // antd 自定义主题 less 变量覆盖全局 依赖 less、less-loader
 addLessLoader({
   javascriptEnabled: true,
   modifyVars: {
     '@primary-color': '#814a96'
   }
 }),
   // 启用装饰器 依赖 依赖 @babel/plugin-proposal-decorators
 addDecoratorsLegacy(),

 // disable eslint in webpack
 disableEsLint(),
    // 允许使用.babelrc文件进行Babel配置。
 useBabelRc(),
 // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
 process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),

 // 配置别名
 addWebpackAlias({
   ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
 }),

 // adjust the underlying workbox
 adjustWorkbox(wb =>
   Object.assign(wb, {
     skipWaiting: true,
     exclude: (wb.exclude || []).concat("index.html")
   })
 )
)

以上为个人总结，有不足有误之处欢迎指出。