其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用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';

webpack css模块化和ant-design按需加载冲突的更多相关文章

  1. Ant Design按需加载

    不eject情况下配置antd按需加载 1.安装 react-app-rewired yarn add react-app-rewired 2. 项目根目录下新建 config-overrides.j ...

  2. webpack中利用require.ensure()实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  3. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  4. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  5. vue按需加载组件-webpack require.ensure

    使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].j ...

  6. 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)

    一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...

  7. 使用Typescript写的Vue初学者Hello World实例(实现按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  8. vue路由管理-保留滚动位置功能、按需加载模块名自定义

    路由管理:保留滚动位置 其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍 作用 把切换出去的组件保留在内存中,可以保留它的状态 ...

  9. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

随机推荐

  1. ecosystem.config

    ecosystem.config.js module.exports = { apps : [{ name : 'TOB_NODE', script : 'app.js', // 开发环境变量 env ...

  2. HYSBZ-2002弹飞绵羊

    某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系数ki,当 ...

  3. HDU1217-Arbitrage(乘法最短路)

    Arbitrage is the use of discrepancies in currency exchange rates to transform one unit of a currency ...

  4. AI Boot Camp 分享之 ML.NET 机器学习指南

    今天在中国七城联动,全球134场的AI BootCamp胜利落幕,广州由卢建晖老师组织,我参与分享了一个主题<ML.NET 机器学习指南和Azure Kinect .NET SDK概要>, ...

  5. HashMap 实现原理解析

    概要 HashMap 最早出现在 JDK 1.2 中,底层基于散列算法实现.HashMap 允许 null 键和 null 值,在计算哈键的哈希值时,null 键哈希值为 0.HashMap 并不保证 ...

  6. Spring面试题总结及答案

    Spring面试总结 Spring是什么? Spring框架是一个java平台,提供全面基础设施支持开发java应用程序. Spring的主要模块有哪些? Spring Code:基础模块,主要提供I ...

  7. Bayer图像处理 raw 数据解析

    Bayer是相机内部的原始图片, 一般后缀名为.raw. 很多软件都可以查看, 比如PS. 我们相机拍照下来存储在存储卡上的.jpeg或其它格式的图片, 都是从.raw格式转化 过来的. .raw格式 ...

  8. processing-python-泡泡龙

    挂一个无耻搬运工:码农教程. 真的打心底里瞧不起为了蹭热度全网照抄代码的某些人. 再次此声明:代码不是python语言,求某些搬运工不要到处搬运害人. def setup(): size(600,60 ...

  9. poj 2513 Colored Sticks (trie树+并查集+欧拉路)

    Colored Sticks Time Limit: 5000MS   Memory Limit: 128000K Total Submissions: 40043   Accepted: 10406 ...

  10. Winform中使用Timer实现滚动字幕效果(附代码下载)

    场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建一个Fo ...