css loader.net,css-loader style-loader原理探究
前言
我们知道,webpack默认只能解析js代码,要想解析其他类型的文件需要用到loader。
比如要打包使用css文件就需要用到css-loader,style-loader,这里我们一起研究下这两个loader的作用。
准备工作
main.css
body{
margin:0 auto;
padding:0 20px;
max-width:800px;
background:#f4f8fb;
}
webpack.config.js
module.exports = {
mode:'none',
entry:'./src/main.css',
output:{
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
use:'css-loader'
}
]
}
}
说明:这里用mode:'none’的原因是打包后的代码方便阅读
css-loader
小结:
css-loader只会把css模块加载到JS代码中,并不会使用这个模块
style-loader
加上style-loader的webpack.config.js内容如下
说明:webpack 多个loader的调用顺序是从后往前,而css-loader的作用是生成一个包含css代码的数组,style-loader的作用是使用这个数组,顺序不能颠倒,所以这里的loader引用顺序也不能颠倒
此时打包后的代码如下:
我们可以看到相比之前多了三个模块,这里我们一一探究这四个模块各自起了啥作用
模块1:
function(module,exports,__webpack_require_){
//引入模块2
var api = __webpack_require__(1);
//引入模块3
var content = __webpack_require__(2);
//处理模块3的内容
......
//定义操作选项options
var options = {};
options.insert = "head";
options.singleton = false;
//调用模块2
var update = api(content,options);
//导出模块1(当前模块)
module.exports = content.locals || {};
}
小结:模块1起一个把控全局的作用。模块1将模块2作为方法,模块3作为参数,调用它。下面我们继续探究模块2,3的作用
模块2
function(module, exports, __webpack_require__) {
"use strict";
//定义函数用来判断当前环境是否支持标准全局变量(widow、document)
var isOldIE = ......
//定义函数用来获取html head
var getTarget = .....
//定义数组用来存放即将插入html head中的style样式
var stylesInDom = [];
//定义函数根据标识符在stylesInDom数组中查找对应的索引
function getIndexByIdentifier.....
//定义函数将样式字符串还原成style语法
function modulesToDom.....
//定义函数创建style标签并插入head
function insertStyleElement......
//定义函数移除style标签
function removeStyleElement......
//定义函数处理样式字符串
var replaceText.....
.....
//导出一个函数 调用上面定义好的函数
module.exports = .....
}
小结:模块2定义了一个方法,用来将css模块插入style,最后将style插入head
模块3
function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
//引入模块4
var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
// Imports
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(false);
// Module
//css字符串存入数组
___CSS_LOADER_EXPORT___.push([module.i, "body{\r\n margin:0 auto;\r\n padding:0 20px;\r\n max-width:800px;\r\n background:#f4f8fb;\r\n}", ""]);
//将包含css字符串数组导出
// Exports
__webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
}
小结:模块3负责调用模块4并将css字符串加入数组
模块4
function(useSourceMap){
//定义数组存放css内容
var list = [];
//定义函数list转字符串
list.toString.....
.....
}
小结:模块4处理css映射相关逻辑
总结:模块2负责将css字符串还原成有效的css dom,模块3调用模块4(模卡4处理css映射逻辑)以及将css变成字符串并返回,最后在模块1中以模块3的内容为参数调用模块2
css loader.net,css-loader style-loader原理探究相关推荐
- webpack 3 零基础入门教程 #6 - 使用 loader 处理 CSS 和 Sass
1. 什么是 loader 官方的解释是这样的: loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader ...
- 加载html动画logo,仅CSS实现的加载动画 – Loader.css
仅CSS实现的加载动画 – Loader.css 4月 13, 2015 评论 (6) Sponsor 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loadi ...
- 什么是loader、项目中安装loader、使用loader管理css格式文件
1.什么是loader? 可以加载和使用项目中的css文件 https://www.webpackjs.com/concepts/loaders/ 1.1.css文件处理-准备工作 1.2.css文件 ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
- [css] 用css创建一个三角形,并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
- [css] 解释下 CSS sprites的原理和优缺点分别是什么
[css] 解释下 CSS sprites的原理和优缺点分别是什么 我来说下我的观点 原理: 多张图合并成一张图优点&解决的问题hover效果,如果是多个图片,网络正常的情况下首次会闪烁一下. ...
- [css] 你知道全屏滚动的原理是什么吗?它用到了CSS的哪些属性?
[css] 你知道全屏滚动的原理是什么吗?它用到了CSS的哪些属性? 全屏滚动和轮播图类似,都是通过改变元素位置或者显示与隐藏来实现,配合JS的一些交互距离判断,实现类似原生滚动捕获的效果.这里全屏的 ...
- html loader使用方法,webpack中loader的使用方法,以及几个常用loader的应用小实例
loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容. 可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那we ...
- Bootstrap 调用默认的CSS文件的时候使用style去设置属性
Bootstrap 调用默认的CSS文件的时候使用style去设置属性 <body class="body" style="background-color: #0 ...
- 浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言 在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从 什么是CSS ...
最新文章
- Python数据挖掘2:pandas使用:Series一串数字和DataFrame数据框
- 《统一沟通-微软-实战》-6-部署-2-中介服务器-1-定义中介服务器
- 查看/清除 本地电脑/浏览器缓存?
- 【UGV】Mec 麦轮版小车结合角度传感器实现直线行走示例
- boost::erase相关的测试程序
- 在 CAP 中使用 AOP ( Castle.DynamicProxy )
- 拥塞控制中的开环和闭环控制
- C++ opengl 复合运动
- win2008 查询 tcp连接失败_TCP详解(转)
- 2021-06-18激活函数的意义
- 2019年Java Web学习笔记目录
- JAVA设计模式初探之适配器模式(转)
- mysql5.7延迟_[MySQL] 号称永久解决了复制延迟问题的并行复制,MySQL5.7-阿里云开发者社区...
- Mac小白必备的一些基础技能
- ChIP-seq笔记
- 喧嚣之后,BAT都在车联网领域落下了哪些棋子?
- NCL中绘制中国任意省份的精确地图
- word和PDF手写电子签名
- OpenLayers学习笔记中级篇(四、地图图标操作)
- 规则引擎Drools示例:个人所得税计算器、信用卡申请、保险产品准入规则