webpack(7)_CSS_使用style-loader和css-loader

webpack除了编译打包js外，还可以编译处理CSS，本篇文章主要讲述如何使用style-loader和css-loader对css打包，主要从以下几点进行讲述：

css的引入
使用style-loader和css-loader打包css
使用style-loader/url
使用style-loader/useable
使用style-loader的options配置
使用css-loader的options配置

css的引入

1、css的引入分为三种情况：

通过<style></style>标签，在标签内可以写css样式
通过<link></link>标签引入css文件
在html标签元素中以style属性来定义样式

2、在js中导入css样式有：

import “base.css”
import Base from “base.css”

使用style-loader和css-loader打包css

1、 style-loader

作用
style-loader能够在需要载入的html中创建一个<style></style>标签，标签里的内容就是CSS内容。
安装style-loader
npm install style-loader --save-dev

2、css-loader

作用
css-loader是允许在js中import一个css文件，会将css文件当成一个模块引入到js文件中。
安装css-loader
npm install css-loader --save-dev

3、实例

进入空目录Test，并初始化，生成package.json文件
npm init
创建目录和文件src/css/base.css，并添加如下代码

html{background: red;
}

创建src/app.js，并将base.css文件当成模块进行引入

import './css/base.css';

创建webpack.config.js，并编写打包脚本

// 引入node的path模块
var path = require('path');
module.exports = {entry: {app: "./src/app.js"  // 要打包的入口文件},output: {path: path.resolve(__dirname, "dist"), // 使用绝对路径，dist目录filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js},module: {rules: [ // 定义css规则{test: /\.css$/, // 正则匹配要识别的cssuse: [{loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面},{loader: 'css-loader' // 使用css-loader进行处理}]//use:['style-loader','css-loader'] // 此处也可以这样写}]}
}

注：上面是webpack2的写法，下面是webpack1的写法，webpack1建议抛弃。

module: {loaders: [{test: /\.css$/,loader: 'style-loaer!css-loader'}]
}

执行打包命令
webpack
打包结果
在dist目录下生成app.bundle.js，打开这个文件，会发现已经将css打包成js代码

// module
exports.push([module.i, "html{\r\n    background: red;\r\n}", ""]);

4、测试打包文件

创建index.html ，并引入打包好的app.bundle.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="./dist/app.bundle.js"></script>
</body>
</html>

测试结果
页面背景变成红色，说明css生效，打开浏览器，查看页面代码，会发现多了个<style>标签，并且将base.css中的内容写入到标签里面。

使用style-loader/url

1、作用

使用style-loader会将js中的css样式打包成<style>标签，而使用style-loader/url则会将js中引入的css文件样式打包成一个css文件，并通过<link>标签引入。

2、安装file-loader

引入文件则需要使用file-loader，npm install file-loader --save-dev

3、配置webpack.config.js文件

// 引入node的path模块
var path = require('path');
module.exports = {entry: {app: "./src/app.js"  // 要打包的入口文件},output: {path: path.resolve(__dirname, "dist"), // 使用绝对路径，dist目录publicPath: './dist/',// todo 指定打包后页面加载的文件路径filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js},module: {rules: [ // 定义css规则{test: /\.css$/, // 正则匹配要识别的sccuse: [{loader: 'style-loader/url' // 使用style-loader进行处理，位置必须在css-loader前面},{loader: 'file-loader' // 使用css-loader进行处理}]// use:['style-loader','css-loader']}]}
}

4、打包测试

执行打包命令webpack，会在dist目录下生成一个css文件，文件内容就是base.css文件中的样式。

运行index.html，在浏览器上查看源代码，会发现此时css样式是用<link>引入的：

5、注意

使用style-loader会将css打包成css文件，并将css文件通过<link>标签进行引入，当app.js中import两个css文件时，执行打包时会在dist目录下生成两个css文件，然后html页面也会引入两个css文件。
例如：

在src/css/目录下新建common.css文件
在app.js中引入
import './css/base.css';
import './css/common.css';
执行打包命令webpack
在dist目录下生成两个css文件，在浏览器上查看,会发现有两个css文件。

使用style-loader/useable

1、作用

使用style-loader/useable，会使导入的css模块能够使用use()和unuse()方法，方便我们进行操作。

2、配置webpack.config.js文件

 rules: [ // 定义css规则{test: /\.css$/, // 正则匹配要识别的cssuse: [{loader: 'style-loader/useable' // 使用userable},{loader: 'css-loader'}}]

3、在app.js中引入base.css文件，并编写测试代码

import Base from './css/base.css';
var flag = false;
setInterval(function () {if (flag) {Base.use();} else {Base.unuse();}flag = !flag;
}, 500);

4、打包测试

执行打包命令webpack，运行index.html会发现当前css样式会不断的加载和移除。

使用style-loader的options配置

对style-loader进行操作，可以配置options属性，options属性常用的有：

attrs
insertAt
insertInto
singleton
transform

1、attrs

作用
给<style></style>标签设置属性，attrs是个对象，内容以键值对形式呈现。
配置webpack.config.js

use: [{loader: 'style-loader',options:{attrs:{id:"index", // 创建id为index，name为index的<style>name:"index"},insertAt :"top", // 插入到id为app的dom元素下singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  }},{loader: 'css-loader'}]

测试结果

2、insertAt和insertInto

作用
在指定的位置插入css样式。insertAt 值为 string 类型，可以是 top 或者 bottom，表示插入某个标签内的顶部或者结尾，和该标签是父子关系；insertInto表示插入到某个dom元素内。
注意，
两个属性的标签选择器，都是通过 document.querySelector 实现的，所以存在两个问题：
1）属性的值，需要符合 document.querySelector 的语法；
2）低版本浏览器（比如IE）可能不支持这个选择器API；
实例
1）insertAt属性设置为top，会将css样式插入到<header></header>标签的首行
配置webpack.config.js

use: [{loader: 'style-loader',options:{insertAt :"top", // 插入到id为app的dom元素下singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  }},{loader: 'css-loader'}]

测试结果

2）insertAt属性设置为bottom，会将css样式插入到<header></header>标签的末行
配置webpack.config.js

use: [{loader: 'style-loader',options:{insertAt :"bottom", // 插入到id为app的dom元素下singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  }},{loader: 'css-loader'}]

测试结果

3）使用insertInto将style样式插入到id为app的元素内
配置webpack.config.js

use: [{loader: 'style-loader',options:{insertInto:"#app", // 插入到id为app的dom元素下singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  }},{loader: 'css-loader'}]

测试结果

4、singleton

作用
是否只使用一个<style>标签,会将页面上的<style>标签合成一个。
类型
布尔类型，true或者false
webpack.config.js配置

use: [{loader: 'style-loader',options:{     singleton:true // 是否只使用一个style,会将页面上的style标签合成一个 }},{loader: 'css-loader'}]

5、transform

作用
在js中可以拿到字符串类型的css样式，然后对css样式进行转换处理，然后返回转换后的css样式。
webpack.config.js配置

use: [{loader: 'style-loader',options:{    // 转化，浏览器环境下，插入页面前,通过这个js能够获取css，并做一些操作 transform:"css.transform.js" }},{loader: 'css-loader'}]

css.transform.js
在项目根目录下创建 css.transform.js

// 对css进行形变
module.exports = function (css) {console.log(css);console.log(window.innerWidth);// 如果什么都不做，直接return css;if (window.innerWidth >= 768) {return css.replace("red","blue");}else {return css.replace("red","orange");}// 在每个class样式前，添加color属性/*   const transformed = css.replace(/}/g, 'color: blue;\n}')return transformed;*/
}

使用css-loader的options配置

对css-loader进行操作，可以配置options属性，options属性常用的有：

importLoader（@import）
minimize（是否压缩）
modules（是否启用css-modules）

1、importLoader（@import）

作用
启用/禁用 @import 处理

2、minimize（是否压缩）

作用
会将css进行压缩，例如去掉空格等。
webpack.config.js配置

use: [{loader: 'style-loader',},{loader: 'css-loader',options: {minimize: true // 对style样式进行压缩}}]

3、modules（是否启用css-modules）

作用
启用modules属性，会将css分模块导入。
webpack.config.js配置

use: [{loader: 'style-loader',},{loader: 'css-loader',options: {modules:true // 启用css模块化调用}}]

在app.js中调用

import Base from './css/base.css';
import './css/common.css';
var app = document.getElementById("app");
app.innerHTML = `<div class="${Base.box}"></div>`;

在base.css中添加代码

.box{composes: bigBox from './common.css'; // 模块化导入common.js中的bigBoxwidth: 300px;height:300px;border-radius: 4px;
}

在common.js中添加代码

.bigBox{background: blue;
}

执行打包命令
webpack
查看浏览器代码，会发现class名是一串乱序的字符串
修改生成的class的名称
通过localIdentName来配置修改生成的class的名称，[path][name]是当前路径名称，[local]是当前class名称，[hash:base64:5]指5位的base54编码的hash值。

use: [{loader: 'style-loader',},{loader: 'css-loader',options: {modules:true, // 启用css模块化调用localIdentName:"[path][name]_[local]_[hash:base64:5]" // 修改生成的class的名称}}]

如下图所示：

参考：
https://www.npmjs.com/package/css-loader
http://www.css88.com/doc/webpack2/loaders/css-loader/
https://yq.aliyun.com/articles/281033