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$/, // 正则匹配要识别的css
use: [
{
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$/, // 正则匹配要识别的scc
use: [
{
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$/, // 正则匹配要识别的css
use: [
{
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中的bigBox
width: 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