Webpack配置Loader - CSS-Loader与Style-Loader的强强联手

认识 CSS-Loader 和 Style-Loader

Webpack 可以通过 Loader 来加载和处理不同类型的文件，而 CSS-Loader 和 Style-Loader 是用于处理 CSS 文件的两个重要 Loader。

• CSS-Loader ：负责将 CSS 文件解析成 AST (抽象语法树)，并将 AST 转换为 CSS 代码。
• Style-Loader ：负责将 CSS 代码注入到页面中。

使用这两个 Loader 可以将 CSS 文件加载并编译成可供浏览器识别的格式。

安装 CSS-Loader 和 Style-Loader

在使用这两个 Loader 之前，需要先安装它们。可以使用 npm 命令进行安装：

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

配置 CSS-Loader 和 Style-Loader

在安装好 CSS-Loader 和 Style-Loader 之后，需要在 webpack.config.js 中进行配置。

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

在这个配置中，当遇到以 .css 为后缀的文件时，会使用 style-loader 和 css-loader 这两个 Loader 来处理。style-loader 会将 CSS 代码注入到页面中，而 css-loader 会将 CSS 文件解析成 AST，并将 AST 转换为 CSS 代码。

使用 CSS-Loader 和 Style-Loader

在配置好 CSS-Loader 和 Style-Loader 之后，就可以在代码中使用它们了。

import './style.css';

这样，就可以将 style.css 文件加载并编译成可供浏览器识别的格式。

总结

CSS-Loader 和 Style-Loader 是 Webpack 中常用的两个 Loader，它们可以将 CSS 文件加载并编译成可供浏览器识别的格式。通过使用这两个 Loader，可以方便地管理和处理 CSS 文件。