css练习题4,复习webpack4之CSS文件代码分割
之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。
这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。
1. MiniCssExtractPlugin
可以利用这个插件对css进行代码分割。
注:补充一个知识点,在output中可以配置chunkFilename,这个是对间接引用的js文件进行命名,稍后会用到。
首先安装插件cnpm install --save-dev mini-css-extract-plugin。
安装完成后,在webpack.config.js中引入插件,并在plugins中初始化。
然后配置module,把所有的style-loader替换为MiniCssExtractPlugin.loader,其他配置项不变。
进行打包,dist目录中就有了CSS文件。
如果此时打包的文件没有css,有可能是因为tree Shaking中,package.json没有设置sideEffects。
2. MiniCssExtractPlugin参数
与js相同,页面直接引用的css命名规则是filename,而间接引用的css命名规则是chunkFilename。
3.MiniCssExtractPlugin其他用法
如果我们引入两个css文件,MiniCssExtractPlugin会把他们打包到一个文件中。
如果想压缩css代码,需要安装一个插件 optimize-css-assets-webpack-plugin。
首先安装cnpm install --save-dev optimize-css-assets-webpack-plugin
然后引入插件。
然后在optimization.minimizer初始化插件。
运行打包命令,发现css代码已经被压缩合并了。
插件底层也借助了splitChunksPlugin,如果css有多个入口,也可以通过cacheGroups来分割合并css代码。
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true // 强制忽略minChunks等设置
}
}
}
}
复制代码
多入口js中,如果想让各个js中引入的css打包到对应的css文件中,需要这样配置。
optimization: {
splitChunks: {
cacheGroups: {
fooStyles: {
name: 'foo',
test: (m, c, entry = 'foo') => // foo入口下的css打包到foo.css中
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true
},
barStyles: {
name: 'bar',
test: (m, c, entry = 'bar') => // bar入口下的css打包到bar.css中
m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
chunks: 'all',
enforce: true
}
}
}
}
复制代码
css练习题4,复习webpack4之CSS文件代码分割相关推荐
- 关于webpack4下css提取打包去重复的那些事
今天是2018-11-14 ,这是7月份写的文章 注意使用vue-cli3(webpack4),默认小于30k不会抽取为公共文件,包括css和js,已测试 环境webpack4.6 + html-we ...
- HTML+CSS的基础复习篇~
---恢复内容开始--- 语义化,让你的网页更好的被搜索引擎理解 在这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签 ...
- 开源超美css动态背景 可直接引入html文件使用 含注释、可更改
开源超美css动态背景 可直接引入html文件使用 含注释.可更改 1.背景样式 本背景为动态蜘蛛网背景. 上图: 2.如何在html里面引用,作为html背景 1文件目录 放在同一目录下 2 在in ...
- doc文件转换html,HTML+CSS入门 如何使用POI将doc文件转换为HTML
本篇教程介绍了HTML+CSS入门 如何使用POI将doc文件转换为HTML,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 需要的jar包有:有一些是依赖包,可以使用ma ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- 手机浏览器加载不出来css,如何解决浏览器不加载css文件的问题
解决浏览器不加载css文件的方法:1.检查css路径是否错误并修改:2.将css文件中指定的编码与页面设置统一:3.修改文件后缀的minetype类型:4.检查并修改HTML头部的DOCTYPE声明. ...
- 【HTML、CSS练习题1】
HTML.CSS练习题1 一.单选题(共25题,每题2分) 二.多选题(不定项选择)(共25题,每题2分) 一.单选题(共25题,每题2分) 1.关于CSS控制字体样式说法错误的是() A .font ...
- java里引用css没反应,解决HTML外部引用CSS文件不生效问题
作为一个前端小白,鼓捣了几天前端..今天突然发现我深信不疑的东西,竟然出现了问题..就比如我在css目录下面写了一个css样式文档:style.css.这时里面只有一句话: body { backgr ...
- Django调用css、img、js等静态文件
开始准备用django做个小项目练手,记录开发中遇到的各种问题. 1. 在settings.py中配置如下: import os STATIC_ROOT = '' STATIC_URL = '/sta ...
最新文章
- 多线程2(常用的方法:join、interrupt、currentThread、isAlive、setDaemon...)
- yolov5模型训练
- Excel文件读写操作(一)
- IOS 项目名称修改(XCODE4.6)
- tomcat7 https 拒绝连接_物与网怎么连接呢?物联网架构及五大通信协议
- 关于java结构中描述正确的是_下列关于Java中类的构造方法的描述,正确的是()...
- k8s ubuntu cni_手把手教你使用RKE快速部署K8S集群并部署Rancher HA
- Elasticsearch 6.x 下载安装
- 如何使用PerfSONAR测试网络
- 还有不会用 SQL 的程序员吗?
- Linux设备驱动(转)
- SQL2005下载版本之区别
- HMC5883L 磁力计校准
- getch()函数怎么用
- 3G中的A-GPS移动定位技术
- Packet Tracer –配置多区域OSPFv2
- Win10计算机窗口空白,windows10语言栏丢失怎么办?win10语言栏显示空白的解决办法...
- 【金猿产品展】亚信科技“数据探索分析平台”——深挖数据价值,助客户高效管理和经营生产...
- MAC升级到10.12.4 SVN CornerStone 一直连接不上的问题 2017年5月16更新
- SSL加密与分布式IM系统-InChat1.1.3版本试用说明
热门文章
- mysql数据库安全机制研究意义_MySQL数据库的安全机制
- python的pillow给图片加文字_Python-Pillow库给图片添加文字、水印
- python保留字的是_Python保留字
- python脚本编程实例_从零学python系列之数据处理编程实例(一)
- BP神经网络识别手写数字项目解析及matlab实现
- QT给文本添加链接事件
- shell 中 $(( )) 与 $( ) 还有 ${ } 的区别
- Lambda 表达式详解~简化匿名内部类
- C++学习之路 | PTA乙级—— 1059 C语言竞赛 (20 分)(精简)
- idea 不打开文件提示错误_解决IDEA误删out目录下的文件导致404无法访问的问题