基于webpack按需引入antd4+

原创于 2023-02-10 16:25:53 发布 · 315 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript

React 专栏收录该内容

14 篇文章

订阅专栏

文章介绍了如何基于Webpack搭建一个简单的脚手架，实现AntDesignv4的按需加载CSS。通过安装和配置babel-plugin-import插件，可以自动按需引入antd的CSS，减少应用的体积。用户需要克隆提供的GitHub仓库，然后安装并配置相应的插件以实现这一功能。

基于webpack按需引入antd4+

自行搭建的简单脚手架，antd5默认自动按需引入css

基础脚手架搭建

git clone git@github.com:Found-404/webpackScaffold.git

下载babel-plugin-import

README中有插件详解

npm install babel-plugin-import -D

修改babel.config.js配置文件

也可能是 .babelrc 文件(视情况而定)

// babel.config.js

// ...

module.exports = {
  // ...
  "plugins": [
    // ⬇⬇⬇🍦🍦🍦⬇⬇⬇
    [
      "import", {
        "libraryName": "antd", // 如果是其他UI组件库可替换该配置
        "libraryDirectory": "es",
        "style": 'css'
      }],
    // ...

  ]
}