webpack 5: 打包样式文件（CSS、LESS、SCSS）

2023-11-07 14:03:27

介绍
项目设置
配置 Webpack
- 安装必要的包
- 创建 webpack.config.js 文件
- 配置 CSS 加载器
- 配置 LESS 加载器
- 配置 SCSS 加载器
使用 Webpack 打包样式文件
- 运行 Webpack
- 检查输出文件
结论

1. 介绍

Webpack 是一个流行的 JavaScript 模块打包工具，它可以将各种类型的文件打包成一个或多个可执行文件。在现代 Web 开发中，我们需要处理多种类型的样式文件，包括 CSS、LESS 和 SCSS。本文将介绍如何在 Webpack 5 中打包这些样式文件。

2. 项目设置

首先，我们需要创建一个新的项目。打开终端或命令提示符，导航到您想要创建项目的位置，然后运行以下命令：

mkdir webpack-style-bundling
cd webpack-style-bundling

这将创建一个名为 webpack-style-bundling 的新目录，并将其作为当前工作目录。

3. 配置 Webpack

接下来，我们需要配置 Webpack。

3.1 安装必要的包

首先，我们需要安装必要的包。在终端或命令提示符中，运行以下命令：

npm install webpack webpack-cli --save-dev

这将安装 Webpack 和 Webpack 命令行界面 (CLI)。

3.2 创建 webpack.config.js 文件

接下来，我们需要创建一个 webpack.config.js 文件。该文件将包含 Webpack 的配置。在项目根目录中，创建一个名为 webpack.config.js 的新文件。

3.3 配置 CSS 加载器

我们需要配置 CSS 加载器来处理 CSS 文件。在 webpack.config.js 文件中，添加以下代码：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

3.4 配置 LESS 加载器

我们需要配置 LESS 加载器来处理 LESS 文件。在 webpack.config.js 文件中，添加以下代码：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

3.5 配置 SCSS 加载器

我们需要配置 SCSS 加载器来处理 SCSS 文件。在 webpack.config.js 文件中，添加以下代码：

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};