webpack css模塊化和ant-design按需加載衝突

其實具體出現了什麼問題,我也記得不清楚了,今天忽然回想起來必須記錄一下,一個思想就是用exclude將node_module目錄下的文件排除,網上有不少相關例子,但不知是否是由於時間久遠,都不生效,無奈,又只好啃回官方文檔,個人解決方式以下css

webpack正常打包的話,全部的css都會被打包在一塊兒,形成css的全局污染,咱們能夠採用模塊化的方式,其實就是借用hash改變類或id名
webpack.config.jsnode

module: {
    rules: [     
 {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",

        options: {
          // presets: [
          //           //   "env"
          //           // ],
          plugins: [
              [ "import",{libraryName: "antd", style: 'css'}] // antd按需加載
          ]
        },

        exclude: /node_module/
      },
      {//CSS處理
        test: /\.css$/,
        use: ['style-loader', 'css-loader?modules'],
        exclude: /node_modules/,
      },

      {//antd樣式處理
        test:/\.css$/,
        exclude:/src/,
        use:[
          { loader: "style-loader",},
          {
            loader: "css-loader",
            options:{
              importLoaders:1
            }
          }
        ]
      },
//其餘配置項
       }
    ]

而後在js文件中咱們就能模塊化加載css而不用擔憂webpack打包後污染到全局啦webpack

形如web

import styles from './myTrip.css';

而後還能夠快樂加載ant-designbabel

import { Pagination } from 'antd';
相關文章
相關標籤/搜索