我正在尝试减小 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 Issue 中的示例非常不同。如何向“config-overrides.js”文件添加别名?
最佳答案
使用customize-cra
的插件addWebpackAlias
/* 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')
})
)
关于reactjs - 使用react-app-rewired和customize-cra添加Webpack别名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54992493/