Webpack中的css-loader 和style-loader
传统上我们会在html文件中引入CSS代码，借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。
style-loader和css-loader作用是不同的。
css-loader: 加载.css文件style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面
css-loader 和style-loader 的options选项
css-loader options
alias: 解析别名importLoader(@import)Minimize:true or false,是否开启css代码压缩，比如压缩空格不换行。- modules：是否开启css-modules
style-loader && style-loader options
style-loader分类
style-loader:配合css-loader使用，以<style></style>形式在html页面中插入css代码style-loader/url： 以link标签形式向html页面中插入代码，采用这种方式需要将css-loader变为file-loader,但这种方式不推荐，因为如果在一个js文件中引入多个css文件会生成多个link标签，而html每个link标签都会发送一次网络请求，所以这种方式并不建议。style-loader/useable: 采取这种方式使用处理
css，会有use( )和unuse（）l两种方法，use（）开启引入样式，unuse（)不适用样式。
options选项
-attrs: 添加自定义 attrs 到 style 标签
- insertAt:插入位置
- insertInto: 插入到指定dom
- singleton:类型为布尔值，多个样式是否只生成一个<style></style>标签。
transform:根据给定逻辑在css插入html前选择指定样式（具体可参考下面实例）
准备工作
新建文件夹并安装相应loader
当前文件夹下执行 npm init
执行 npm install style-loader css-loader --save-dev
执行npm install file-loader--save-dev(后面需要用到)
文件结构
demo 01：在js文件中引入css，查看打包后的效果。
/*webpack.config.js*/
var path = require('path')
module.exports = {
entry: {
app: './app.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.js'
},
module: {
rules: [
{
test: /\.css$/,
use:[
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
}
]
}
}
app.js
/*app.js*/
import base from './src/css/base.css'
base.css
/*base.css*/
html {
background: #808080
}
这是一个最简单的例子，我们在入口文件app.js中引入base.css。配置文件中针对.css文件应用了css-loader,style-loader,注意这里loader的顺序不能颠倒，webpack是自下而上解析的，只有通过css-loader处理css后才能通过style-loader生成<style></style>标签。
将打包后的app.bundle.js文件引入html可以看到背景变为灰色，并且生成了的<style></style>标签插入到<head></head>中
在base.css中新增样式
```
/*base.css*/
html {
background: #808080
} p { /*新增*/
font-size: 40px
}
```
在common.css中增加样式并在app.js中导入import common.css from './src/css/common.css'
/*common.css*/
html {
color: red
}
打包后可以看到引入的每个css文件都对应生成了一个<style></style>标签。
接下来我们将配置文件中的style-loader变成style-loader/url,这时css-loader需要替代为file-loader.打包后在控制台可以看到html中引入了两个<link></link> 标签。
demo 02: 使用style-loader/useable
使用style-loader/useable， 需配合css-loader(不是file-loader)。
common.css
// common.css
html {
background: red
}
base.css
// base.css
html {
background: #808080
}
app.js
import base from './src/css/base.css'
import common from './src/css/common.css' let bgFlag = true
document.onclick = function toggleBgColor() {
if (bgFlag) {
base.use()
common.unuse()
} else {
common.use()
base.unuse()
}
bgFlag = !bgFlag
}
打包后，在浏览器中点击页面可以切换页面的背景颜色，使用style-loader/url配合css-loader也是生成<style></style>标签，但是如果使用file-loader也能打包，但是在style标签中引入的是打包后的css chunks，并不能生效。
初始页面
点击一次，bgFlag === true,base.css生效，背景色为灰色。
在点击一次 bgFlag === false, 应用common.css，背景色为红色。
将css-loader变为file-loader,可以发现点击页面可以标签里的打包后的css chunks，但是这样是无法生效的。
demo 03 使用options选项。
attrs:attrs是一个对象，以键值对出现，在<style></style>标签中以key=value出现，键值对可以自定义，但是使用时建议语义化。
//style-loader添加options选项
{
loader: 'style-laoder',
options: {
attrs: { //attrs是一个对象，以键值对出现，建议语义化
first: '1'
}
}
}
可以看到base.css和common.css对应的两个<style></style> 标签都被添加了first = "1"
接下来我们给style-loader的options增加singleton属性,IE9对页面上style标签数量有严格限制，所以这个属性还是很有用的。
// webpack.config.js
use:[
{
loader: 'style-loader',
options: {
attrs: {
first: 1
},
singleton: true
}
},
{
loader: 'css-loader' }
]
可以看到，此时只有一个标签插入到文档中。common.css和base.css模块的样式被合并到一个样式标签中。
上面提到options选项还有insertAt属性，insertAt有两个值top | bottom,如果不配置insertAt则 默认为bottom，当insertAt： ‘top’ 时 ，loader打包的css将优先已经存在的css，insertInto插入到指定标签。
在html页面中添加新的样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo 01</title>
<style>
html { //背景色设置为红色
background: red
}
</style>
</head>
然后insertAt: ‘top’打包后可以发现webpack打包加载生成的标签会在标签的上方。背景色会被覆盖为红色。 
在html中新建<div id="app"></div> 标签，利用insertInto将打包的css插入到该div中。
demo 04 options中的transform
options: {
transform: './src/transform.js' //值对应一个js文件
}
transform.js中导入一个函数，函数的参数是css，这时我们拿到的css样式是以字符串的形式，所以可用repalce方法修改样式，transform.js可以通过style-loader会根据需要在css未加载到页面之前修改样式，在函数中我们可以获取到浏览器的相关信息，比如window,navigator等，这有助于我们根据相关信息修改样式。在这个例子中，我们判断window的innerWidth当小于476px时，将字体由24px变为12px。当浏览器宽大于476px时加载进来的css 文本大小为24px。
// transform.js
module.exports = function(css) {
console.log(css)
console.log(window.innerWidth) if (window.innerWidth < 476) {
return css.replace('24', '12')
}
return css
}
css-loader options
less和sass
npm install less-loader less --save-dev
npm install sass-loader node-sass --save-dev
提取css
extract-loader
ExtractTextWebpackPlugin
Webpack中的css-loader 和style-loader的更多相关文章
- webpack中，css中打包背景图，路径报错
css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...
- （4）webpack中配置css，scss，less第三方loader
为什么要使用第三方loader 一般引入样式文件,我们会在html中引入样式标签. 很明显,这样就跟之前在script中引入js文件一样,会导致二次请求.我们希望webpack像处理js文件一样处理样 ...
- Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack中使用typescript
概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...
- 如何在webpack中使用loader
一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...
- Webpack的详细配置，[Webpack中各种loader的安装配置]
在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...
- 第五十篇： webpack中的loader(一) --css-loader
好家伙, 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后,自动打开浏览器 open:ture, //在http协议中,如果端口号是80,则可以被 ...
- webpack中css文件的代码分割
module.exports = { output: { filename: '[name].js', chunkFilename: '[name].chunk.js', path: path.res ...
- webpack快速入门——CSS中的图片处理
1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...
- Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
随机推荐
- centos服务重启
重启openstack的整个服务openstack-service restart 1. 重启dashboardservice httpd restart service memcached rest ...
- 20145215《网络对抗》Exp6 信息搜集与漏洞扫描
20145215<网络对抗>Exp6 信息搜集与漏洞扫描 基础问题回答 哪些组织负责DNS,IP的管理? 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和 ...
- 浅谈Python闭包
闭包是在其词法上下文中引用了自由变量的函数. 通俗地说,就是函数嵌套(后续称之为外层函数)另外一个函数(后续称之为内层函数),在内层函数中,引用外层函数的变量,每次对内层函数的调用,外层函数变量的值都 ...
- JDBC-通用查询
手动实现查询结果返回为一个对象集合 实体类 package com.jdbc; public class User { private Integer id; private String name; ...
- Java Calendar使用总结
JavaCalendar 类时间操作,这也许是创建和管理日历最简单的一个方案,示范代码很简单. 演示了获取时间,日期时间的累加和累减,以及比较. 原文地址:blog.csdn.NET/joyous/a ...
- centos shell运行报语法错误: 未预期的文件结尾
可能原因: 脚本是windows下写的,然后传到linux下运行的 需要给dos文件格式转成unix dos转unix 安装: yum install dos2unix 命令: dos2unix fi ...
- LR(0)文法项目集规范族、DFA和分析表的构建实例
最近在复习编译原理,考试之前以为自己懂了,眼高手低就没去实践.结果一考试出问题了.... 学习就要脚踏实地,容不得半点模糊.凭着侥幸心理很危险的.以后要引以为戒啊. 特别写出这篇文章 :一来总结一下这 ...
- Aircrack-ng介绍
1.介绍 Aircrack-ng主要使用了两种攻击方式进行WEP破解:一种是FMS攻击:一种是KoreK攻击. 2.主要组件 1.aircrack-ng 主要用于WEP及WPA-PSK密码的恢复,主要 ...
- 后台拿webshell方法（2）
在这里总结一下后台拿webshell的方法: 备份突破(在博客上有随笔介绍) 一般在后台上传文件类型受到限制,可以利用数据库备份将其上传的格式改为后门执行格式即可: asp更改为jpg jpg ...
- php+mysql注入
SQL简单命令介绍: mysql.exe -u 用户名 -p 密码 -h ip地址 show databases;查看数据库 select version();php注入下的版本号 use d ...