webpack-css

2024年08月05日

柏拉文

越努力，越幸运

一、认识

---

Webpack配置文件通过使用不同的loader和插件，能够有效地处理各种类型的样式文件（普通和模块化），并根据开发环境和生产环境选择合适的方式加载和处理CSS。配置中的每个loader和plugin都有其特定的作用，通过合理配置可以使项目中的样式文件在开发和生产环境下得到有效的管理和优化。

1. style-loader / MiniCssExtractPlugin.loader:

   • style-loader: 在开发模式下将CSS通过<style>标签插入到HTML中, 并且速度比 css 文件快快一些

   • MiniCssExtractPlugin.loader: 通过 MiniCssExtractPlugin.loader, 将 CSS 从你的 bundle 中分离出来，创建单独的 CSS 文件, 这样可以使用 CSS/JS 文件的并行加载。

2. css-loader: 处理CSS文件，使其可以在JS中被引用和加载。

   • esModule: false: 禁用CSS文件的ES模块化，以便与CSS模块化兼容

   • modules: { localIdentName: "[name]__[local]___[hash:base64:5]" }: 启用CSS模块化，并指定生成的类名格式。

3. postcss-loader: 使用PostCSS处理CSS，例如添加浏览器前缀等。这里配置了postcss-preset-env插件，根据目标浏览器自动添加所需的前缀和进行其他的CSS后处理。

4. sass-loader / less-loader:

   • sass-loader: 加载并编译SCSS或SASS文件为CSS

   • less-loader: 加载并编译LESS文件为CSS。

二、准备

---

安装所需要的 css-loader、style-loader、sass-loader、sass、less、less-loader、postcss-loader、mini-css-extract-plugin、postcss-preset-env

pnpm add css-loader style-loader sass-loader sass less less-loader postcss-loader mini-css-extract-plugin postcss-preset-env -D

三、配置

---

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const devMode = process.env.NODE_ENV !== "production";

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env", {}]],
              },
            },
          },
        ],
      },
      {
        test: /\.(sa|sc)ss$/,
        exclude: /\.module\.scss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env", {}]],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.less$/,
        exclude: /\.module\.less/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env", {}]],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.module\.css$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              esModule: false,
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]",
              },
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env", {}]],
              },
            },
          },
        ],
      },
      {
        test: /\.module\.(sa|sc)ss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              esModule: false,
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]",
              },
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env", {}]],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.module\.less$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              esModule: false,
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]",
              },
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env", {}]],
              },
            },
          },
          "less-loader",
        ],
      }
    ]
  },
  plugins: [
    ...(devMode
      ? []
      : [
          new MiniCssExtractPlugin({
            filename: "[name].[contenthash].css",
            chunkFilename: "[id].[contenthash].css",
          }),
        ]),
  ],
};