Webpack: 如何借助预处理器、PostCSS 等构建现代 CSS 工程环境

本文链接：https://blog.csdn.net/Tyro_java/article/details/139962550

概述

在开发 Web 应用时，我们通常需要编写大量 JavaScript 代码 —— 用于控制页面逻辑；编写大量 CSS 代码 —— 用于调整页面呈现形式。问题在于，CSS 语言在过去若干年中一直在追求样式表现力方面的提升，工程化能力薄弱，例如缺乏成熟的模块化机制、依赖处理能力、逻辑判断能力等。为此，在开发现代大型 Web 应用时，通常会使用 Webpack 配合其它预处理器编写样式代码
我们看下Webpack 中如何使用 CSS 代码处理工具，包括：
- 如何使用 css-loader、style-loader、mini-css-extract-plugin 处理原生 CSS 文件？
- 如何使用 Less/Sass/Stylus 预处理器？
- 如何使用 PostCSS ？

Webpack 如何处理 CSS 资源？

原生 Webpack 并不能识别 CSS 语法，假如不做额外配置直接导入 .css 文件，会导致编译失败：

为此，在 Webpack 中处理 CSS 文件，通常需要用到：
css-loader：该 Loader 会将 CSS 等价翻译为形如 module.exports = "${css}" 的JavaScript 代码，使得 Webpack 能够如同处理 JS 代码一样解析 CSS 内容与资源依赖；
style-loader：该 Loader 将在产物中注入一系列 runtime 代码，这些代码会将 CSS 内容注入到页面的 <style> 标签，使得样式生效；
mini-css-extract-plugin：该插件会将 CSS 代码抽离到单独的 .css 文件，并将文件通过 <link> 标签方式插入到页面中。
PS：当 Webpack 版本低于 5.0 时，请使用 extract-text-webpack-plugin 代替 mini-css-extract-plugin。
三种组件各司其职：css-loader 让 Webpack 能够正确理解 CSS 代码、分析资源依赖；style-loader、mini-css-extract-plugin 则通过适当方式将 CSS 插入到页面，对页面样式产生影响：

下面我们先从 css-loader 聊起，css-loader 提供了很多处理 CSS 代码的基础能力，包括 CSS 到 JS 转译、依赖解析、Sourcemap、css-in-module 等，基于这些能力，Webpack 才能像处理 JS 模块一样处理 CSS 模块代码。接入时首先需要安装依赖：$ yarn add -D css-loader

之后修改 Webpack 配置，定义 .css 规则：

module.exports = {
     
     
  module: {
     
     
    rules: [
      {
     
     
        test: /\.css$/i,
        use: ["css-loader"],
      },
    ],
  },
};

此后，执行 npx webpack 或其它构建命令即可。经过 css-loader 处理后，样式代码最终会被转译成一段 JS 字符串：

源码转译后

.main-hd { font-size: 10px; } //... var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default())); // Module ___CSS_LOADER_EXPORT___.push([ module.id, ".main-hd {\n font-size: 10px;\n}", "" ]); // Exports /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); //...

源码	转译后
`.main-hd { font-size: 10px; }`	`//... var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default())); // Module ___CSS_LOADER_EXPORT___.push([ module.id, ".main-hd {\n font-size: 10px;\n}", "" ]); // Exports /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); //...`

但这段字符串只是被当作普通 JS 模块处理，并不会实际影响到页面样式，后续还需要：
- 开发环境：使用 style-loader 将样式代码注入到页面 <style> 标签；
- 生产环境：使用 mini-css-extract-plugin 将样式代码抽离到单独产物文件，并以 <link> 标签方式引入到页面中。
经过 css-loader 处理后，CSS 代码会被转译为等价 JS 字符串，但这些字符串还不会对页面样式产生影响，需要继续接入 style-loader 加载器。
与其它 Loader 不同，style-loader 并不会对代码内容做任何修改，而是简单注入一系列运行时代码，用于将 css-loader 转译出的 JS 字符串插入到页面的 style 标签。接入时同样需要安装依赖：$ yarn add -D style-loader css-loader

之后修改 Webpack 配置，定义 .css 规则：

module.exports = {
     
     
  module: {
     
     
    rules: [
      {
     
     
        test: /\.css$