webpack学习笔记（二）loader--css的打包和注入html

loader用于对模块的源代码进行转换，在import或加载其他模块前可以使用loader进行预处理，比如可以把typescript转换成JavaScript，通过这样也允许了在JavaScript中引入css和less/sass文件。

以在JavaScript中importcss文件为例，首先要引入两个npm包：style-loader和css-loader

style-loader用于将处理好的css代码注入到html文件中的style标签

css-loader用于在import css文件前进行预处理

1
npm i style-loader css-loader -s

首先在根目录创建dist文件夹，src文件夹和webpack.config.js文件

在src下创建style文件夹存放css文件，编写css文件如下

1
2
3
4
5
div {
    width: 100px;
    height: 100px;
    background-color: black;
}

在src根目录下创建index.js文件并import css文件，创建一个dom并插入到页面中

1
2
3
import './style/index.css';
 
document.body.appendChild(document.createElement('div'));

编写webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path');
 
module.exports = {
    entry: "./src/index.js", // 设置要打包的文件
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            // 配置所有css文件
            test: /\.css$/,
            // 从右往左引用，先使用css-loader处理后再使用style-loader将css代码注入到html文件中
            use: ['style-loader', 'css-loader']
        }]
    }
}

在dist文件夹下创建html文件，导入打包生成的main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
 
<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>Document</title>
</head>
 
<body>
    <script src="main.js"></script>
</body>
 
</html>

在页面中打开该文件，检查代码，发现css代码已经注入到style标签中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html lang="en">
    <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>Document</title>
        <style type="text/css">div {
            width: 100px;
            height: 100px;
            background-color: black;
        }
        </style>
    </head>
 
    <body>
        <script src="main.js"></script>
        <div></div>
    </body>
</html>

less/sass和css的处理相似，在module.rules中的use后加多一个less-loader/sass-loader进行处理即可，webpack-config.js修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const path = require('path');
 
module.exports = {
    entry: "./src/index.js", // 设置要打包的文件
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }]
    }
}