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

概述

• 在开发 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 内容注入到页面的