ruiurrui

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的引入分为三种情况：

通过标签，在标签内可以写css样式
通过标签引入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中创建一个标签，标签里的内容就是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


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

测试结果
页面背景变成红色，说明css生效，打开浏览器，查看页面代码，会发现多了个标签设置属性，attrs是个对象，内容以键值对形式呈现。
配置webpack.config.js

use: [
         {
             loader: 'style-loader',
             options:{
                   attrs:{
                        id:"index", // 创建id为index，name为index的