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';