最近做项目时，使用create-react-app脚手架引入Ant Design，官网教程是采用不抛出webpack配置，利用react-app-rewired来修改脚手架默认webpack配置，详情可查看官网教程：在 create-react-app 中使用
而使用yarn eject抛出脚手架的内建webpack配置需要自行探索，下面就简单介绍下配置教程：
- 按需加载
- 安装
babel-plugin-import
yarn add babel-plugin-import --dev
- 修改
webpack.config.dev.js
找到babel-loader配置的地方，添加按需加载 Ant Design的配置
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
// Process application JS with Babel.
// The preset includes JSX, Flow, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-prettier,-svgo![path]'
}
}
}
],
// Ant Design 按需加载
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// Don't waste time on Gzipping the cache
cacheCompression: false
}
}
- Less 更改主题
- 安装
less和less-loader
yarn add less less-loader --dev
- 修改
webpack.config.dev.js
在上面按需加载的配置处修改style: 'css'为style: true
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]
- 添加
less配置信息
// 引入 Less 配置
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true
}
}
]
}
