手把手教你webpack3（6）css-loader详细使用说明

CSS-LOADER配置详解

前注：

文档全文请查看 根目录的文档说明。

如果可以，请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里，发【Issues】。

1、概述

对于一般的css文件，我们需要动用三个loader（是不是觉得好麻烦）；

1、css-loader：

先附上官网文档（中文）的链接：css-loader文档。

不过说实话，这个官方文档讲的很糟糕，看的人一脸懵逼。

css-loader主要用于处理图片路径（其实也包括例如导入css文件的路径），并且会将css样式打包进js文件中（以模块的形式打包导入）；

但问题在于，他不会将这些代码插入html中，因此还需要通过例如style-loader来实现将打包好的css代码插入html文件中。

2、style-loader：

同样先附上官网文档（中文）的链接：style-loader文档

基本用法：

用于将 css-loader 打包好的css模块，插入到html文件中，变成一个 <style>标签；

3、file-loader：

file-loader文档

基本用法：

用于处理各种资源文件，一般是图片，不然图片是没办法被同时打包的。

2、css-loader配置详解

先吐槽一波，中文文档里的说明，真的是描述的一点都不清楚。

2.1、root

名称类型默认值描述
root {String} / 解析 URL 的路径，以 / 开头的 URL 不会被转译

官方文档里对这个解释不够严谨。

首先，假如不设置设个属性，如果理解为，以 / 开头的url不会被转译，从结果来看，也不算错；

然而，假如设置这个属性的话，那么就不一样了。

在面对图片路径时，这个属性有三种情况：

  1. 当不设置这个属性的时候，css-loader不会去解析以/开头的图片路径，也不会报错；
  2. 当设置这个属性的时候，即使你设置其值为默认值 /，css-loader也会去尝试解析这个路径，如果找不到对应的图片，会报错；
  3. 当设置这个属性的值为非默认值，和【2】中的行为是一样的，css-loader去尝试解析这个路径，如果找到图片，则正常解析，找不到，会报错；



当设置这个属性时，是指，当url以 /为开头时，到底去找哪里的文件夹作为解析以 /为开头的url路径的文件；

当面对css文件路径时，即在css文件里，通过 @import 引入css文件时，这个是不对css文件的路径生效的（即使找不到，也不会报错）。

示例：

文件树：

根目录
|-- src
| |-- app.js
| |-- src
|   |-- logo.png
|
|-- static
| |-- abc.png
|
|-- webpack.config.js

那么在 webpack.config.js 里配置的时候，应该这么写：root: __dirname + '/static/'。

__dirname 表示根目录的绝对路径。假如根目录的路径是 D:/abc/def，那么 __dirname 就表示 D:/abc/def ，而 __dirname + '/static/ 则表示 D:/abc/def/static

这就是告诉 css-loader ，遇见 / 开头的url路径，你应该去 D:/abc/def/static 这个路径下去找文件。

2.2、

名称类型默认值描述
url {Boolean} true 启用/禁用 url() 处理

首先，我们已知，css-loader 正常会解析css属性里的图片url路径，例如 background: url('/logo.png') 里面的值。

那么，假如某图片不在你的工程里，而是在服务器上。

而你是可以预知打包后的html文件和这个图片的相对路径关系，你就可以直接写那个时候的路径，并将url设置为false。

但是，如果设置为false，那么所有url都不会进行转义了（也不会触发file-loader），自然也不会报错（即使图片不存在）。

示例：

假如打包后，上传到服务器的目录为：

dist
|-- app.js
|-- logo.png

那么你如果想引用 logo.png ，那么把 url 设置为 false 之后，然后路径这么写就行了 background: url('./logo.png')。

2.3、alias

名称类型默认值描述
alias {Object} {} 创建别名更容易导入一些模块

说实话我自己捣鼓了半天也没彻底搞明白其原理，但是琢磨出來一些用法：

1、对图片路径生效

假如文件结构：

根目录
|--static
|  |-- logo.png
|-- webpack.config.js

解释：

  1. 已知： 图片放在 /static 目录下；
  2. 已知：不确认css文件放在哪里（因为模块化，方便移动，所以可能更改模块的目录结构）；
  3. 需求：我想要确保我的css文件必然能引用到这个图片，即使更改模块的文件路径，也不影响（不需要我二次去修改）；
  4. 行动：那么添加 css-loader 的属性，设置如下：alias: {'@': __dirname + '/static/'} ;
  5. 行动：在css文件里，图片如下引用 background: url(~@/logo.png)；
  6. 结果：我就可以确保必然css文件必然能引用到这个图片了；
  7. 注意： @ 前要加 ~ 让 webpack 识别（~ 是 webpack 负责识别，认为是根目录，而 @ 是 css-loader 负责）；

2、对 @import 引入的css文件无效；

假如文件结构：

根目录
|--static
|  |-- style.css
|  |-- foo.css
|-- webpack.config.js

解释：

  1. 文件目录结构如上；
  2. 在 style.css 如果通过 @import '~@/foo.css' 来导入；
  3. 即使在 webpack.config.js 里这么设置 alias: {'@': __dirname + '/src/style/'} 也是没有用的；

3、解决场景：

这个可以应用的场景挺多，不过现在很多是通过webpack的别名通用配置来解决

  1. css文件和图片文件分离；
  2. 也可以分类摆放图片（例如@开头的是风景类图片，peopel开头的是人物图片）；
  3. 记得在别名之前加一个波浪线~让webpack识别，否则无法正常工作；

2.4、import

名称类型默认值描述
import {Boolean} true 启用/禁用 @import 处理
  1. 假如你通过@import导入的是某个打包后工程所在位置的css文件；
  2. 即该文件不在打包前的工程里（例如CDN）；
  3. 那么这个就有用；
  4. 表现效果@import导进来的css没有被打包，只是单纯的引入了（该@import代码被直接放在style标签里）；
  5. 你可以查看dist/index.html的style标签来深刻了解；

这里给一个简单的示例：

webpack打包前：

// foo.css
@import 'http://abc.com/m.css'

webpack打包后：

// html文件（假设使用了style-loader把css通过style标签插入）
<style>
@import 'http://abc.com/m.css'
</style>

2.5、minimize

名称类型默认值描述
minimize{Boolean|Object}false启用/禁用 压缩
  1. 这个很好理解，原本写css文件的时候，我们各种换行空格，这个改为true之后，换行和空格就去掉了；

  2. 一般开发的时候，取环境变量，当环境变量为生产环境的时候，设置为true；开发环境的时候，设置为false；

  3. 关于生产环境的配置，可以查看参考示例，搜索 minimize 即可；

压缩前代码：

* {margin: 0;border: 0;padding: 0;
}.box {border-radius: 150px;
}

压缩后代码：

*{margin:0;border:0;padding:0}.box{border-radius:150px}

2.6、sourceMap

名称类型默认值描述
sourceMap{Boolean}false启用/禁用 Sourcemap


  1. 在 minimize 设置为 true 后，css代码被压缩了，那么如果我们要调试的话就很麻烦；
  2. 当 sourceMap 设置为 true 后，通过Chrome控制台的 Sources 标签，在左边栏上面选 Sources ，可以在树结构的 (no domain) 里，查看到压缩后和压缩前的CSS代码；
  3. 即使 minimize 没有设置为 true （不压缩），由于css代码被扔到了js里，因此也是无法直接查看我们写的css代码的；
  4. 但是 sourceMap 设置为true后，就可以通过【2】中描述的途径来查看我们写的css代码；

启用 sourceMap 压缩前的代码：

这里写图片描述

启用 sourceMap 压缩后的代码：

这里写图片描述

2.7、importLoaders

名称类型默认值描述
importLoaders{Number}{Number}在 css-loader 前应用的 loader 的数量

说实话，加不加这个，感觉没啥区别（我还专门研究了一波postcss和autoprefixer让他生效。

见我关于postcss的配置，为了正常运行，我在项目里webpack把这个注释掉了，可以取消掉注释 // importLoaders: 0 // 感觉没什么用

如果有见解，欢迎指正

2.8、modules等

名称类型默认值描述说明
modules {Boolean} false 启用/禁用 CSS 模块 1、初步理解：这个相当于把css视为模块。例如我有一个css文件 foo.css ，然后里面有一个类 .bar，我可以在js文件里通过 import foo from './foo.css'导入这个css文件；

2、在打包后，foo.css里的类 .bar 会变成具有唯一性的一个字符串（举个例子假设他变成了abcdefg）；

3、假如我在html里使用的是class='bar'，那么显然是无法正常生效的（bar被转为了abcdefg）；

4、那么我可以使用变量foo.bar（在js这里，这是一个变量），赋给原本使用class='bar'的这个DOM节点；

5、由于是变量，所以他的值事实上已经被css-loader转为了abcdefg，可以正常运行了；

6、推荐阮一峰的博客CSS Modules 用法教程
camelCase{Boolean|String}false以驼峰化式命名导出类名 1、这个需要结合modules来看，在modules设置为true时，我们可以通过变量名来获取更名后的css类名；

2、但我们写css类名的时候，一般是例如foo-bar这种写法，在js里显然不合适；

3、因此把这个启用为true，我们就可以使用fooBar这种驼峰式写法了，方便js引用；
localIdentName{String}[hash:base64]配置生成的标识符(ident) 1、这个也是跟modules相关的，用于对原本混算复杂不具有可读性的类名，进行重命名；

2、我觉得这个文章讲这个比较好，你真的知道 css-loader 怎么用吗？，搜索关键词：localIdentName

这三个是一起使用的的，见表格内容吧。

3、项目地址

https://github.com/qq20004604/webpack-study/tree/master/5%E3%80%81Loader/css_loader ，请 Star 和 fork 到本地后，注意相关配置。

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

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

相关文章

shell远程执行命令

shell远程执行命令

1、先要配置免密登陆&#xff0c;查看上一篇免密传输内容 2、命令行执行少量命令&#xff1a;ssh ip "command1;command2"。例&#xff1a;ssh 172.1.1.1 "cd /home;ls" 3、脚本批量执行命令&#xff1a; #&#xff01;/bin/bash ssh ip << remotes…
阅读更多...
Python调用C语言

Python调用C语言

Python中的ctypes模块可能是Python调用C方法中最简单的一种。ctypes模块提供了和C语言兼容的数据类型和函数来加载dll文件&#xff0c;因此在调用时不需对源文件做任何的修改。也正是如此奠定了这种方法的简单性。 示例如下 实现两数求和的C代码&#xff0c;保存为add.c //samp…
阅读更多...
多重线性回归 多元线性回归_了解多元线性回归

多重线性回归 多元线性回归_了解多元线性回归

多重线性回归 多元线性回归Video Link影片连结 We have taken a look at Simple Linear Regression in Episode 4.1 where we had one variable x to predict y, but what if now we have multiple variables, not just x, but x1,x2, x3 … to predict y — how would we app…
阅读更多...
tp703n怎么做无线打印服务器,TP-Link TL-WR703N无线路由器无线AP模式怎么设置

tp703n怎么做无线打印服务器,TP-Link TL-WR703N无线路由器无线AP模式怎么设置

TP-Link TL-WR703N无线路由器配置简单&#xff0c;不过对于没有网络基础的用户来说&#xff0c;完成路由器的安装和无线AP模式的设置&#xff0c;仍然有一定的困难&#xff0c;本文学习啦小编主要介绍TP-Link TL-WR703N无线路由器无线AP模式的设置方法!TP-Link TL-WR703N无线路…
阅读更多...
unity 克隆_使用Unity开发Portal游戏克隆

unity 克隆_使用Unity开发Portal游戏克隆

unity 克隆Learn game development principles by coding a Portal-like game using Unity and C#. The principles you learn in this lecture from Colton Ogden can apply to any programming language and any game.通过使用Unity和C&#xff03;编写类似于Portal的游戏来学…
阅读更多...
swift基础学习(八)

swift基础学习(八)

####1.主要用到的知识点 CAGradientLayer 处理渐变色AVAudioPlayer 音频播放Timer 定时器CABasicAnimation 动画#####2.效果图 ####3.代码 import UIKit import AVFoundationclass ViewController: UIViewController, AVAudioPlayerDelegate {var gradientLayer: CAGradientLay…
阅读更多...
pandas之groupby分组与pivot_table透视

pandas之groupby分组与pivot_table透视

一、groupby 类似excel的数据透视表&#xff0c;一般是按照行进行分组&#xff0c;使用方法如下。 df.groupby(byNone, axis0, levelNone, as_indexTrue, sortTrue, group_keysTrue,squeezeFalse, observedFalse, **kwargs) 分组得到的直接结果是一个DataFrameGroupBy对象。 df…
阅读更多...
js能否打印服务器端文档,js打印远程服务器文件

js能否打印服务器端文档,js打印远程服务器文件

js打印远程服务器文件 内容精选换一换对于密码鉴权方式创建的Windows 2012弹性云服务器&#xff0c;使用初始密码以MSTSC方式登录时&#xff0c;登录失败&#xff0c;系统显示“第一次登录之前&#xff0c;你必须更改密码。请更新密码&#xff0c;或者与系统管理员或技术支持联…
阅读更多...
spring—JdbcTemplate使用

spring—JdbcTemplate使用

JdbcTemplate基本使用 01-JdbcTemplate基本使用-概述(了解) JdbcTemplate是spring框架中提供的一个对象&#xff0c;是对原始繁琐的Jdbc API对象的简单封装。spring框架为我们提供了很多的操作模板类。例如&#xff1a;操作关系型数据的JdbcTemplate和HibernateTemplate&…
阅读更多...
vanilla_如何在Vanilla JavaScript中操作DOM

vanilla_如何在Vanilla JavaScript中操作DOM

vanillaby carlos da costa通过卡洛斯达科斯塔 如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Vanilla JavaScript) So you have learned variables, selection structures, and loops. Now it is time to learn about DOM manipulation and to start doi…
阅读更多...
NOIP201202寻宝

NOIP201202寻宝

题目 试题描述传说很遥远的藏宝楼顶层藏着诱人的宝藏。 小明历尽千辛万苦终于找到传说中的这个藏宝楼&#xff0c;藏宝楼的门口竖着一个木板&#xff0c;上面写有几个大字&#xff1a;寻宝说明书。说明书的内容如下&#xff1a;藏宝楼共有N1层&#xff0c;最上面一层是顶层&…
阅读更多...
修改UITextField中的placeholder的字体

修改UITextField中的placeholder的字体

修改字体颜色&#xff1a; [textField setValue:[UIColor redColor] forKeyPath:"_placeholderLabel.textColor"]; 复制代码 修改字体大小&#xff1a; [textField setValue:[UIFont boldSystemFontOfSize:16] forKeyPath:"_placeholderLabel.font"]; 复…
阅读更多...
如何使用Python处理丢失的数据

如何使用Python处理丢失的数据

The complete notebook and required datasets can be found in the git repo here完整的笔记本和所需的数据集可以在git repo中找到 Real-world data often has missing values.实际数据通常缺少值 。 Data can have missing values for a number of reasons such as observ…
阅读更多...
MySQL—隔离级别

MySQL—隔离级别

READ UNCOMMITED(读未提交) 即读取到了正在修改但是却还没有提交的数据&#xff0c;这就会造成数据读取的错误。 READ COMMITED(提交读/不可重复读) 它与READ UNCOMMITED的区别在于&#xff0c;它规定读取的时候读到的数据只能是提交后的数据。 这个级别所带来的问题就是不可…
阅读更多...
做虚拟化服务器的配资一致嘛,服务器虚拟化技术在校园网管理中的应用探讨.pdf...

做虚拟化服务器的配资一致嘛,服务器虚拟化技术在校园网管理中的应用探讨.pdf...

第 卷 第 期 江 苏 建 筑 职 业 技 术 学 院 学 报14 3 Vol.14 曧.3年 月 JOURNAL OF JIANGSU JIANZHU INSTITUTE2014 09 Se .2014p服务器虚拟化技术在校园网管理中的应用探讨,汪小霞 江建( , )健雄职业技术学院 软件与服务外包学院 江苏 太仓 215411: , ,摘 要 高校校园网数据…
阅读更多...
aws中部署防火墙_如何在AWS中设置自动部署

aws中部署防火墙_如何在AWS中设置自动部署

aws中部署防火墙by Harry Sauers哈里绍尔斯(Harry Sauers) 如何在AWS中设置自动部署 (How to set up automated deployment in AWS) 设置和配置服务器 (Provisioning and Configuring Servers) 介绍 (Introduction) In this tutorial, you’ll learn how to use Amazon’s AWS…
阅读更多...
Runtime的应用

Runtime的应用

来自&#xff1a;http://www.imlifengfeng.com/blog/?p397 1、快速归档 (id)initWithCoder:(NSCoder *)aDecoder { if (self [super init]) { unsigned int outCount; Ivar * ivars class_copyIvarList([self class], &outCount); for (int i 0; i < outCount; i ) …
阅读更多...
使用 VisualVM 进行性能分析及调优

使用 VisualVM 进行性能分析及调优

https://www.ibm.com/developerworks/cn/java/j-lo-visualvm/转载于:https://www.cnblogs.com/adolfmc/p/7238893.html
阅读更多...
spring—事务控制

spring—事务控制

编程式事务控制相关对象 PlatformTransactionManager PlatformTransactionManager 接口是 spring 的事务管理器&#xff0c;它里面提供了我们常用的操作事务的方法。注意&#xff1a; PlatformTransactionManager 是接口类型&#xff0c;不同的 Dao 层技术则有不同的实现类 …
阅读更多...
为什么印度盛产码农_印度农产品价格的时间序列分析

为什么印度盛产码农_印度农产品价格的时间序列分析

为什么印度盛产码农Agriculture is at the center of Indian economy and any major change in the sector leads to a multiplier effect on the entire economy. With around 17% contribution to the Gross Domestic Product (GDP), it provides employment to more than 50…
阅读更多...
最新文章

Copyright @ 2022~2023