按需加载antd的实现方式:
用create-react-app创建项目后,如果需要第三方的插件库,需要配置webpack配置文件,步骤如下:
1.首先运行npm run eject暴露出webpack的配置文件,项目对多出config和scripts文件夹
2.安装完antd和babel-plugin-import后,修改config目录下的webpack.config.js里面 // Process any JS outside of the app with Babel 下面,在persets后面添加
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
plugins:[
["import",{"libraryName": "antd", "style": "true"}] //此处添加
],
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
},
},