webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中? - Tim的资源站...
现在我们有一个很好的打包了,但所有的 CSS 都去了哪里?根据配置,它已被内联到 JavaScript!虽然这在开发过程中很方便,但听起来并不理想。
当前的解决方案 CSS 是无法缓存的,并且还有一个未样式化元素闪动(FOUC)问题。发生 FOUC 是因为浏览器需要一段时间才能加载 JavaScript,并且到那时才会应用样式。将 CSS 分离到自己的文件可以让浏览器单独管理它,从而避免了这个问题。
Webpack 提供了一种使用 mini-css-extract-plugin(MCEP)生成单独的 CSS 包的方法。它可以将多个 CSS 文件聚合为一个。出于这个原因,它配备了一个 loader 来专门处理这个过程。然后,插件会获取 loader 抽取的结果并发出单独的文件。
由于这个过程会产生比较大的开销,所以,MiniCssExtractPlugin 只会作用于编译阶段,它不适用于热模块更换(HMR)。鉴于这个插件只是在生产环境中使用,所以也不是什么大的问题。
在生产环境中,使用内联样式可能有潜在危险,因为它向外提供了一个攻击途径。关键路径渲染借鉴了这个思路,它将关键 CSS 内联到初始 HTML 中,从而提高了站点的感知性能。在有限的上下文中,内联少量的 CSS 可能是加速初始加载(更少的请求)的可行选择。
配置 MiniCssExtractPlugin
首先安装插件:
npm install mini-css-extract-plugin --save-dev
MiniCssExtractPlugin 包括一个 MiniCssExtractPlugin.loader,用来标记要提取的资源。然后,插件基于这个标记执行资源提取的工作。
将以下配置添加到配置的开头:
webpack.parts.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
exports.extractCSS = ({ include, exclude, use = [] }) => {
// 将 css 抽出
const plugin = new MiniCssExtractPlugin({
filename: "[name].css",
});
return {
module: {
rules: [
{
test: /\.css$/,
include,
exclude,
use: [
MiniCssExtractPlugin.loader,
].concat(use),
},
],
},
plugins: [plugin],
};
};
该 [name] 占位符使用引用 CSS 的入口的名称。“ 添加哈希值到文件名”一章中详细讨论了占位符和散列。
如果要将结果文件输出到特定目录,可以通过传递路径来完成。例如:filename: "styles/[name].css"。
合并配置
使用以下配置将部分配置合并到主配置上:
webpack.config.js
const productionConfig = merge([
parts.extractCSS({
use: "css-loader",
}),
]);
const developmentConfig = merge([
...
parts.loadCSS(),
]);
使用此设置,您仍然可以在开发期间受益于 HMR。但是对于生产构建,可以生成单独的 CSS。HtmlWebpackPlugin 自动拾取并将其注入到 index.html。
如果您使用的是 CSS Modules,请按照“ 加载样式”一章中的说明进行相应的调整。您可以为标准 CSS 和 CSS Modules 维护单独的设置,以便通过独立的逻辑加载它们。
通过 npm run build 运行后,您应该看到类似于以下内容的输出:
Hash: 45a5e26cc963eb12db02
Version: webpack 4.1.1
Time: 752ms
Built at: 3/16/2018 4:24:40 PM
Asset Size Chunks Chunk Names
main.js 700 bytes 0 [emitted] main
main.css 33 bytes 0 [emitted] main
index.html 220 bytes [emitted]
Entrypoint main = main.js main.css
[0] ./src/index.js + 1 modules 247 bytes {0} [built]
| ./src/index.js 99 bytes [built]
| ./src/component.js 143 bytes [built]
[1] ./src/main.css 41 bytes {0} [built]
...
现在样式已被抽取到单独的 CSS 文件中。因此,JavaScript 包变得略小。你也避免了 FOUC 问题。浏览器不必等待 JavaScript 加载以获取样式信息。相反,它可以单独处理CSS,避免画面闪动。
如果您收到 Module build failed: CssSyntaxError:或Module build failed: Unknown word 的错误,请确保您的通用配置没有设置与 CSS 相关的部分。
管理 JavaScript 之外的样式
尽管通过 JavaScript 引入样式,然后再打包是推荐的做法;但我们也可以在入口通过 glob 找到 CSS 文件来达到同样的目的:
...
const glob = require("glob");
...
const commonConfig = merge([
{
entry: {
...
style: glob.sync("./src/**/*.css"),
},
...
},
...
]);
在进行此类更改后,您不必从应用程序代码中引用样式。这也意味着 CSS Modules 不再起作用,你也必须小心 CSS 规则的排序。
按照上面的配置,您应该同时获得 style.css 和 style.js。后一个文件包含类似 webpackJsonp([1,3],[function(n,c){}]); 的内容,它会像 webpack issue 1967 中所讨论的那样不做任何事情。
如果您想要严格控制排序,可以设置一个单独的 CSS 入口,然后使用 @import 语句将其余部分的样式导入到项目中。另外一种做法是设置JavaScript 入口并通过 import 语句获得相同的效果。
总结
当前的配置将样式与 JavaScript 干净地分离开来。即使该技术对 CSS 最有价值,它也可用于提取 HTML 模板或您使用的任何其他文件类型。困难的是,这与 MiniCssExtractPlugin 的设置有关,但这种复杂性可隐藏在抽象背后。
回顾一下:
使用 MiniCssExtractPlugin 样式解决了 FOUC 的问题、CSS 缓存失效问题以及潜在的攻击风险。
如果您不希望通过 JavaScript 引入样式,还可以通过入口来引入它。但是,在这种情况下,您必须小心样式规则的排序。
在下一章中,您将学习如何从项目中去除未使用的 CSS。
webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中? - Tim的资源站...相关推荐
- css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像?
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
- 太大的ppt文件怎么压缩变小
太大的ppt文件怎么压缩变小?(优速文件压缩器) 对于一些从事演讲或教育行业的伙伴们来说,PPT文件可以说是工作中不可或缺的一个文件格式了.那大家在使用PPT文件的时候就应该都会有这样的经验,有的PP ...
- html有几个文件夹,关于webpack打包问题,怎么打包成多个文件夹,每个文件夹下有相应的html,js和css?...
用vue-cli创建的工程,默认webpack配置是打包成单文件,现在有个需求是打包出很多文件夹,其相对应的html,js和css在不同文件夹下,自己修改了一些配置,改为多chunk形式,html被单 ...
- html公共模块提取出去,webpack 填坑之路--提取独立文件(模块)
前言 最近重新看了一遍 webpack 提取公共文件的配置.原来觉得这东西是个玄学,都是 "凭感觉" 配置.这篇文章将以解决实际开发遇到的问题为核心,悉数利用 webpack 提取 ...
- webpack 保存文件后自动打包_继webpack后又一打包神器Parcel
前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...
- webpack插件实现自动抽取css中的主题色样式,并动态切换主题色(element-ui)
项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...
- webpack 中实现自动识别 CSS Modules
编者按:本文作者奇舞团前端开发工程师彭体奎 背景 在 React 项目中使用 CSS 时,如果不使用 CSS in JS 的方案,一般会直接在 JS 文件中导入一个 CSS 文件,比如 import ...
- webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍 以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
- woff字体文件怎么用到html,【webpack】font-awesome加载不到woff字体文件
开发环境:Webpack + React 好几个使用了Font-awesome字体文件的项目中都遇到同一个问题,在本地测试的时候,使用webpack开发服务器,字体图标无法正常显示. 通过Chrome ...
最新文章
- hdu1542 线段树扫描线求矩形面积的并
- 抛出java类型异常的方法_Java Streams:抛出异常的优雅方法
- c# 正则获取html标签内容,c# – 使用正则表达式在多个HTML标记之间获取文本
- 算法题5 用数组实现队列
- Spring-RestTemplate之urlencode参数解析异常全程分析
- linux学习之路之使用脚本来复制二进制程序和所需的库文件
- 物流车辆数据在金融科技的应用
- LeetCode 1004. 最大连续1的个数 III(双指针+滑动窗口)
- [Web开发] Web程序调式的利器 - Fiddler (HTTP协议监视工具)
- 分布式存储系统学习笔记(二)—分布式文件系统(1)—Google文件系统GFS
- node js npm grunt安装,elasticsearch-head 5.X安装
- 64位系统安装SQL2000SP4详细教程[已测试WIN72008R2]
- mac的angular/cli安装及踩坑记录
- 汇编语言程序设计 --- 一元二次方程ax2+bx+c=0求解(含注释详细源代码)
- 又一个阿里离职的 P10 大佬
- Mapbox可视化之填色图
- 处理ORA-06512错误方法
- 计算机版的微信的功能是什么,微信PC版有什么功能 测试版增加了这些实用功能...
- 7-42 sdut-循环-3-评委评分(II)
- 购物网站Laravel版
热门文章
- spell_picture二次升级版
- 一步一步教你如何用python做词云_一步一步教你如何用Python做词云
- mSystems:华中农大郝秀丽组发现稀有/丰富微生物类群对镉污染土壤改良剂的不同反应!...
- 优秀博士生与普通博士生差距能有多大?
- Nature子刊:Knight组发布快速UniFrac算法
- 宏基因组扩增子1图表解读-理解文章思路,零基础测序分析图表解读大全(箱线,散点,热,曼哈顿,火山,韦恩,三元,网络),老板再也不愁我的文献阅读了!
- Python使用matplotlib可视化时间序列堆叠的面积图、堆叠面积图给出了多个时间序列的贡献程度的可视化表示,以便于相互比较(Stacked Area Chart)
- R语言ggplot2可视化:使用gganimate包和gapminder包为生成的动画文件gif设置尺寸、分辨率
- R语言sys方法:sys.getpid函数获取R会话的进程ID、sys.glob函数和file.path函数匹配文件夹下的所有特定类型文件、sys.info函数获取系统和用户信息
- R语言ggplot2可视化自定义图例标签间距实战:自定义图例标签间距、自定义图例与图像之间的间距