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中初始化。

695ae12a3f0f881aab19351ead5ee89d.png

6838bbce4817fd095491d0f6d58093ff.png

然后配置module,把所有的style-loader替换为MiniCssExtractPlugin.loader,其他配置项不变。

66a2eb66d2c6c721bcf259ae29498580.png

进行打包,dist目录中就有了CSS文件。

7b7ef0641fb14ca87c3e171c4a926a0f.png

如果此时打包的文件没有css,有可能是因为tree Shaking中,package.json没有设置sideEffects。

87bc73d00541c914b6d9ae6f356a7070.png

2. MiniCssExtractPlugin参数

85add785000fe3f1e4e2f67752a0c590.png

与js相同,页面直接引用的css命名规则是filename,而间接引用的css命名规则是chunkFilename。

3.MiniCssExtractPlugin其他用法

如果我们引入两个css文件,MiniCssExtractPlugin会把他们打包到一个文件中。

32256cd94e345f4788335f8459057b8e.png

如果想压缩css代码,需要安装一个插件 optimize-css-assets-webpack-plugin。

首先安装cnpm install --save-dev optimize-css-assets-webpack-plugin

然后引入插件。

e3cf672222d06c8ea320422248c4b04c.png

然后在optimization.minimizer初始化插件。

9a22f934598c2c962d28af90a31af521.png

运行打包命令,发现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

}

}

}

}

复制代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504955.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

minhash算法检索相似文本_基于向量的深层语义相似文本召回?你需要bert和faiss...

在文章大话知识图谱--聊聊智能客服中,我介绍了智能客服系统利用FAQ问答库做自动问答,也就是基于信息检索的自动问答系统。它的一般做法流程是:构建一个大型的FAQ问答库,形式是(question,answer)…

vuex的命名空间有哪些_Python3 命名空间和作用域

命名空间先看看官方文档的一段话:A namespace is a mapping from names to objects.Most namespaces are currently implemented as Python dictionaries。命名空间(Namespace)是从名称到对象的映射,大部分的命名空间都是通过 Python 字典来实现的。命名…

ajax实现翻书效果,jQuery实现手机版页面翻页效果的简单实例

var page 1;var size 6;var mark 0;var url "{pigcms{:U(Order/index, array(page>d%))}";var commentTpl \去评价\;var template \""))}">\\{store_name}\\\\""))}">\\ \\{create_time}\总价:¥…

yolo极大抑制_pytorch实现yolov3(4) 非极大值抑制nms

在上一篇里我们实现了forward函数.得到了prediction.此时预测出了特别多的box以及各种class probability,现在我们要从中过滤出我们最终的预测box.理解了yolov3的输出的格式及每一个位置的含义,并不难理解源码.我在阅读源码的过程中主要的困难在于对pytorch不熟悉,所以在这篇文…

抽象类可以生成自己的对象吗_大理石可以自己抛光吗?大理石自己抛光方法解答...

大理石可以自己抛光吗?大理石自己抛光方法解答。大理石只有经过抛光后,表面才会有更好的光泽和质感。具体抛光可以要求大理石抛光团队施工,也可以自己做。那么大理石自己抛光方法是什么呢?下面石大夫为您解答。大理石自己抛光方法…

ajax 参数带百分号,Ajax请求中带有IPv6地址后的百分号的问题

IPv6地址后的百分号:对于连入网络但没有IPv6路由器或DHCPv6服务器的IPv6客户端,它们始终使用fe80::/64链路本地网络地址。如果运行Windows的计算机中有多个网络适配器连接到不同的网段,可以在IP地址后加百分号和区域ID数字来区分不同的网络,如…

高中数学40分怎么办_高二数学不会,准高三该怎么办?40分到高考140如何逆袭?...

原标题:高二数学不会,准高三该怎么办?40分到高考140如何逆袭?高二,这个年级是有点尴尬的,适应了高一的学习,感觉高二学习没有了动力,离高考还远,于是有些孩子就开始了放任…

python识别人脸多种属性_深度学习人脸识别仅9行python代码实现?同时高效处理100张相片?...

随着人脸识别、视频结构化等计算视觉相关技术在安防、自动驾驶、手机等领域走向商业化应用阶段,计算视觉技术行业市场迎来大规模的爆发。伴随人脸识别、物体识别等分类、分割算法不断提升精度。计算视觉的核心算法深度学习算法日渐成熟,通过对输出与对应…

服务器可以装2个系统吗,云服务器可以装多个系统吗

云服务器可以装多个系统吗 内容精选换一换共享云硬盘是一种支持多个云服务器并发读写访问的数据块级存储设备,具备多挂载点、高并发性、高性能、高可靠性等特点。主要应用于需要支持集群、HA(High Available,指高可用集群)能力的关键企业应用场景&#x…

关卡 动画 蓝图 运行_UE4无缝过场动画

最近有个哥们给我看他们最近在做的一个游戏,其中有这样一段镜头https://www.zhihu.com/video/1171378736917364736运用到了一个很常用的过场方式,就是平时我们所说的无缝过场。过场动画不通过黑屏转换,而是通过运镜来代入。这是一种比较容易实…

python条件循环叠加_Python基础:条件判断与循环的两个要点

一、条件判断:Python中,条件判断用if语句实现,多个条件判断时用if...elif实现:看下面一段程序#python 3.3.5#test if...elifage 20if age > 6:print (teenager)elif age > 18:print (adult)else:print (kid)程序输出结果&a…

H3C批量收集服务器信息,H3C设备服务器采集参数认证过程(包含redfish和restfull协议)...

该脚本针对H3C服务器分别对redfish和restfull两种协议的认证方式进行测试,并合并。有三个类,分别是redfish协议测试、restfull协议测试、以及两个合并测试文章最后使用redfish模块简单进行认证访问测试。import requestsimport jsonrequests.packages.ur…

个推的appid是指什么_推箱子软件介绍→安卓下最专业的推箱子软件(推箱快手)...

俗语说:工欲善其事必先利其器目前各安卓系统下的应用市场有很多很多推箱子软件,除了soko推箱子软件比较好以外,其余没有任何一款软件是推箱子好手想去使用的,为什么呢?先说说soko这款软件好在哪儿?点推式推…

list转字符串_剑指offer 38——字符串的排列

本题主要在于对回溯的理解,优化时可以结合 java 特性,以及排列的一些知识。原题输入一个字符串,打印出该字符串中字符的所有排列。你可以以任意顺序返回这个字符串数组,但里面不能有重复元素。示例:输入:s "abc&…

v5系列服务器后面板不存在以下哪款指示,群晖RS10613xs+ NAS服务器后面板简介

群晖RS10613xs NAS服务器后面板简介群晖RS10613xs NAS服务器后面板简介:NAS服务器的后面板往往承担着数据的输入、输出,电影的输入,网络的传输,容量的扩展,电能的支持以及产品的散热等重要功能,看似简单的后面板往往是…

怎么判断冠词用a还是an_【语法微课堂】英语冠词的用法,学会这4点,轻松玩转a、an、the...

点击上方??蓝色字,轻松关注!Well begun is half done.良好的开端是成功的一半。准备了一下午,终于可以给大家更新了,给大家分享了冠词讲解的视频、音频和文字版,自行取用吧!?冠词讲解视频版(小提示&…

pb自定义控件 事件_Android WebView与下拉刷新控件滑动冲突的解决方法

使用WebView时一般会在外层使用下拉刷新控件如(SwipeRefreshLayout)。但是测试时会发现网页无法上拉,往上滑动就会触发下拉刷新控件的refresh事件。所以这里记录一下解决该问题的办法。1、通过webView.getScrollY() 的值来判断是否滚动到顶部private SwipeRefreshLa…

双路服务器cpu必须型号相同,双路主板存在使用不同型号的cpu之说吗?还是必须使用一模一样相同的cpu型号?...

双路主板不存在使用不同型号的cpu一说, 可以使用不同型号的cpu, 不过参数差别不能过大(例如处理器的架构差别)多路主板就是一种主从结构, 处理器之间是协同工作,由中间的高速总线实现两个处理器的配合,不存在处理器必须…

打开多个界面_如何创建用户界面

CANBusKit,是一款集成汽车总线开发、测试、分析的专业软件工具。本章内容主要介绍如何使用CBK_OpenPanel工具为CANBUSKIT 工程创建用户界面,本工具目前支持Vector的xvp格式的面板文件导入。首先是启动软件(试用版软件只能从CANBusKit软件界面中启动该软件…

python命令行解析_python命令行解析函数

sys.argv在终端运行python 1.py hahahimportsysprint(sys.argv) #[1.py, hahah]argparsePython的命令行解析模块,这是一个python的内置库,通过在程序中我们定义好的参数,argparse将会从sys.argv中解析出这些参数,并自动生成帮助和…