如何在 Webpack5 使用 loader 加载 CSS 模块

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

什么是 loader

那什么是 loader 呢？我们在前面介绍过 Webpack 打包的简易流程。Webpack 只能识别 JS 和 JSON 这样的文件，这是 Webpack 开箱可用的自带的能力。

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

loader 可以让 Webpack 解析其他的类型的文件，并且将这些文件转化为有效的模块，以供我们应用程序使用。比方 JS 可以去加载一个 CSS 模块，就是通过 loaders 来实现的。

那么，loader 该怎么定义呢？loader 的定义有两个重要的属性：

在 module rules 下面定义test 属性，这个属性识别出哪些文件被转换。
在 module rules 下面定义 use 属性，它在定义转化的时候，应该使用哪个 loader 来进行转化，比如 test:'/.txt/'，use: 'raw-loader'，告诉 Webpack，当你碰到通过 require 或者是 import 去解析一个 .txt 的文件的时候，再对这个文件进行打包之前你先使用 raw-loader 转换一下。

如何使用 loader 加载 CSS 模块

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置中添加这些 loader。

在本地安装 style-loader 和 css-loader，如果只安装和配置 css-loader，CSS 样式不会生效：

npm install --save-dev style-loader css-loader

在 webpack.config.js 配置文件配置 loader：

// webpack.config.js
//...
module.exports = {
    //...
    module: {
        rules: [
            {
                test:/.css$/,
                use: ['style-loader', 'css-loader'],


            },


        ]
    }
}

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后，因为现在需要用 css-loader 让我们的项目打包没有问题，识别 CSS 文件，然后再通过 style-loader 把 CSS 放置到页面上。如果不遵守此约定，Webpack 可能会抛出错误或者 CSS 样式不生效。

Webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。

通过在项目中添加一个新 /src/style.css 文件。

.hello{
    background-color:blue;
}

在 /src/index.js 文件像加载一个模块一样试图加载 style.css 样式。

// index.js


//... 
import './style.css'

//...

const block=document.createElement('div')
block.textContent=exampleText
document.body.appendChild(block)


document.body.classList.add('hello')

使用 Webpack 编译打包命令进行打包，通过 webpack-dev-server 启动服务。

可以看到在 head 里面多了一个样式标签，它把样式加载到了标签中，因此 CSS 样式就生效。

大家以前有了解过 CSS 和一些预处理的工具，比如 sass、less、stylus 等等。那么，loader 能不能解析 sass、less、stylus 这样的文件呢？答案是肯定的。