时间戳

首页 > 技术文章 > antd按需加载

antd按需加载

sundaysme 2020-08-21 01:46 原文

https://www.cnblogs.com/sunhang32/p/12157990.html

 

https://www.jianshu.com/p/bcd887d31046

 

今天在项目中用antd的时候发现antd样式无效，经过检查发现是因为我项目中用到了css modules。如果项目中只是引入antd.css，那么根据官网步骤配置webpack是不会有问题的。但是如果项目中同时引入css modules和按需引入antd，那么就会导致antd样式无效。

1.首先我项目中的配置是这样的
/*
  webpack.config.js中的配置
**/
module: { // 这里配置Babel
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      }, 
      { // 这里配置这两个工具
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader"
          }, {
            loader: "css-loader",
            options: {
              modules: true, // 指定启用css modules
              importLoaders: 1,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }
   ]
}
/*
  .babelrc中的配置
**/
{
  "presets": ["react", "env", "stage-0"],
  "env": {
    "development": {
      "plugins": [["react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          
          "imports": ["react"],
          
          "locals": ["module"]
        }]
      }]]
    }
  }
}
2.根据antd design 官网按需引入antd
  • 首先安装babel-plugin-import
npm install babel-plugin-import --save-dev
yarn add babel-plugin-import
  • babel-loader的query/options字段加入
"plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"  // style: true 会加载 less 文件
    }]
  ]
  • .babelrc中plugins字段这样配置
{
  "presets": ["react", "env", "stage-0"],
  "env": {
    "development": {
      "plugins": [["react-transform", {
        "transforms": [{
          "transform": "react-transform-hmr",
          
          "imports": ["react"],
          
          "locals": ["module"]
        }]
      }]]
    }
  },
  "plugins": [
    ["import",{
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"}] // antd按需加载
  ]
}
3.但是这样配置还是和antd的不一样，需要添加如下配置
//antd样式处理
{
   test:/\.css$/,
   exclude:/src/,
   use:[
     { 
      loader: "style-loader"},
       {
         loader: "css-loader",
         options:{
           importLoaders:1
        }
      }
   ]
}
  • 在webpack.config.js中配置如下
module: { // 这里配置Babel
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader"
        },
        exclude: /node_modules/
      }, { // 这里配置这两个工具
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "style-loader"
          }, {
            loader: "css-loader",
            options: {
              modules: true, // 指定启用css modules
              importLoaders: 1,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }, { // antd样式处理
        test:/\.css$/,
        exclude:/src/,
        use:[
          { loader: "style-loader"},
          {
            loader: "css-loader",
            options:{
              importLoaders:1
            }
          }
        ]
      }
    ]
}
 
 
0人点赞
 
自树一帜
 
 
"小礼物走一走，来简书关注我"


作者：秉持本心
链接：https://www.jianshu.com/p/bcd887d31046
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 
 
https://www.jb51.net/article/156019.htm
 

我目前使用的antd版本是2.13。现在最新的是3.0.1。 

脚手架工具就是create-react-app。创建完成项目后，需添加配置，执行yarn eject 也就是打开配置的文档。 

然后安装第三方依赖yarn add babel-plugin-import --save-dev 

找到config文件夹。里面有2个配置文档， 

webpack.config.dev.js和webpack.config.prod.js 

添加配置时一定要保持文档的一致性。我就是犯了错误，值配置了开发的没有配置正式文档导致错误。 

首先打开webpack.config.dev.js 

在147行添加这段代码

1
2
3
plugins: [
            ['import', [{ libraryName: "antd", style: 'css' }]],
          ],

 

同样的配置在webpack.config.prod.js里面也需要添加。 

这样就真正实现了按需加载，就不会再报黄色的警告。

还有第二种简单的方式，就是在package.json里面直接添加这行代码。当然前提也是需要先安装依赖：yarn add babel-plugin-import --save-dev

 

1
2
3
4
5
6
7
8
9
10
11
12
13
"babel": {
  "presets": [
   "react-app"
  ],
  "plugins": [
   [
    "import",
    {
     "libraryName": "antd",
     "style": "css"
    }
   ]
  ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

推荐阅读