Добавьте псевдоним Webpack с помощью переустановки приложения и настройки

Question

Я пытаюсь уменьшить размер библиотеки 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"?

Answer 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')
  })
)