Webpack（3）： 使用 loader 处理 CSS

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

前言

上文讲解了 webpack 的简单配置和配置文件的使用，初步实现模块化的打包构建工作。

本文将以在 webpack 中处理 css 样式文件为例，演示 loader 的使用。

准备文件

src/index.css

body {
  font-size: 40px;
  color: gold;
}

前文中说过，webpack 的世界，一切皆模块，每个文件就是一个模块。那么 css 文件也是一个模块，将其引入入口文件中：

import './index.css'
​
document.querySelector('body').innerHTML = 'Hello'

然后执行打包命令：

pnpm webpack

报错：

根据报错信息 “You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file”，需要配置一个合适的 loader 来处理 css 文件。

Loader

什么是 loader

Webpack 基于 Node.js， 只“认识” JavaScript 和 JSON 文件。Loader，模块加载器，就是让 webpack 能够去识别其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

处理 css 文件，我们需要用到两个 loader：

• css-loader：解析 css 文件，转译为 webpack 能识别的模块
• style-loader：将 css 使用 标签插入到页面中，从而让样式生效

安装 loader

pnpm add css-loader style-loader -D

配置 loader

安装好 loader 还需要进行配置，告诉 webpack 这个 loader 针对哪些类型的模块发挥作用。

配置文件中提供了一个 module.rules 配置项，可知该配置项是用来配置模块规则的，也就是用来配置 loader 的。

const path = require('path')
module.exports = {
  mode: 'development',
​
  entry: './src/index.js',
​
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  },
  
  // module 用来配置处理模块
  module: {
    // rules 是一个数组, 每一项是针对某类模块的一种配置；可以有若干个配置
    rules: [
      // 规则有几个常用的属性
      { 
        // 通过正则表达式指定匹配的模块类型
        test: /.css$/, 
        
        // 使用哪种 loader 进行处理
        // loader 的生效是有顺序的，从右到左，也就是先用 css-loader 处理 webpack 能识别的内容，再经 style-loader 将样式插入到页面中
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
}

打开命令行窗口，执行打包命令：

pnpm webpack

没有再报错，css 模块已经能被正确处理了。

浏览器打开 index.html：

经过打包后的 css 样式被插入到 html 文件中了。

但是这种结构不是很合理，最好的方式是将 css 打包成一个单独的文件，再被 html 引入。要实现这个效果，需要 webpack plugin 的支持，我们放到后面讲 plugin 的时候再介绍。

小结

本文介绍了如何使用 webpack 处理 css 文件，其实就是利用 css-loader 和 style-loader。同时介绍了 loader 在 webpack 中发挥的作用，就是帮助 webpack 处理它不认识的模块类型。同时也讲解了 loader 的简单配置。

下篇文章，会介绍如何在 webpack 中处理 less 文件和 scss 文件。