使用 react-app-rewired 和 customize-cra 添加 Webpack 别名答案

【问题标题】：Add Webpack Alias With react-app-rewired and customize-cra使用 react-app-rewired 和 customize-cra 添加 Webpack 别名
【发布时间】：2019-03-04 22:21:53
【问题描述】：

我正在尝试通过消除不必要的图标来减小Ant Design 库的大小。我在网上找到了这个解决方案，https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228

解决方案涉及像这样配置 Webpack：

module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

我不知道该怎么做，因为我使用react-app-rewired 和customize-cra 以及babel-plugin-import，所以我的“config-overrides.js”文件看起来像这样，这与提供的非常不同例子。

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        style: 'css',
    }),
);

我正在使用以下依赖项：

"antd": "^3.14.1",
"babel-plugin-import": "^1.11.0",
"customize-cra": "^0.2.12",
"downshift": "^3.2.6",
"material-icons-react": "^1.0.4",
"react": "^16.8.3",
"react-app-rewired": "^2.1.0",
"react-dom": "^16.8.3",
"react-scripts": "^2.1.5",
"styled-components": "^4.1.3"

这看起来与 Github 问题中的示例非常不同。如何为我的“config-overrides.js”文件添加别名？

【问题讨论】：

标签： reactjs webpack create-react-app

【解决方案1】：

使用插件addWebpackAlias 的customize-cra

/* global require, module, __dirname */
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const path = require('path')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
    ['@']: path.resolve(__dirname, 'src')
  })
)

【讨论】：

如何在 customize-cra 中添加 UglifyJsPlugin 。例如：const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { optimization: { minimizer: [new UglifyJsPlugin()], }, };
这绝对解决了我的问题。谢谢！