一. 按需加载
为什么要按需加载?
1.在使用antd的组件时会自动加载css
2.大大减少打包后的文件体积
按照官网的介绍使用babel-plugin-loader即可实现,这里就不赘述
二. 按需加载同时使用自定义样式
这里需要用到三个loader
$ npm install --save-dev style-loader css-loader url-loader
webpack配置
在配置的时候我们得写两套样式处理规则,分别处理antd样式和自己的样式
处理Antd样式
{
test: /\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
importLoaders: 1
}
}
],
exclude: /app/, //这里要将自己的排除在规则外
}
处理自己的样式
{
test: /\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
}
],
exclude: /node_modules/, //这里要将Antd的样式排除
}
这里还需要注意的是在配置entry的时候,因为我们的antd已经按需加载了,所以无需再重复打包