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

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

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

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打包後污染到全局啦

形如

import styles from './myTrip.css';

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

import { Pagination } from 'antd';