Webpack Less

引言

Less 是一种流行的 CSS 预处理器，它在 CSS 的基础上扩展了变量、嵌套、混合、运算等高级特性，让样式编写更高效、易维护。Webpack 可以通过专用 Loader 处理 Less 文件，将其编译为 CSS 并集成到项目中。

安装依赖

为了使 Webpack 能够处理 Less 文件，我们需要安装核心编译器与加载器（非插件）：

npm install less less-loader -D

less：Less 官方编译器，负责将 Less 代码编译为标准的 CSS 代码
less-loader：Webpack 专用 Loader，负责让 Webpack 识别并加载 Less 文件，调用 less 完成编译
-D 参数：将依赖安装为开发依赖，仅用于开发环境

创建 Less

在项目的 src/less 目录下创建 index.less 文件，编写带变量的 Less 代码：

/* src/less/index.less */
@size: 18px;

h1 {
  font-size: @size;
}

修改配置文件

打开 webpack.config.js，添加 Less 文件的处理规则。Loader 执行顺序固定为从右向左，依次完成编译、解析、注入样式。

// ESM 模式导入 Node.js 模块
import path from 'path';
import { fileURLToPath } from 'url';
// ESM 模式导入 HTML 插件
import HtmlWebpackPlugin from 'html-webpack-plugin';

// 手动兼容 __dirname（Node.js ESM 无内置变量，必须配置）
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// ESM 标准导出配置
export default {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在目录
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    // 模块解析
    resolve: {
        // 自动补全文件后缀，引入时可省略
        extensions: ['.js', '.ts', '.css', '.less', '.vue']
    },
    // 配置 Webpack 加载规则
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                // 排除 node_modules 目录，提升打包速度
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                // 匹配所有以 .less 结尾的文件
                test: /\.less$/,
                // 执行顺序：less-loader → css-loader → style-loader
                // 1. less-loader 编译 Less 为 CSS
                // 2. css-loader 解析 CSS 模块
                // 3. style-loader 将样式注入页面 DOM
                use: ["style-loader", "css-loader", "less-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
};

引入 Less

Less 文件必须被入口文件引用，才能被 Webpack 识别并打包。在 src/index.ts 中引入样式文件：

// src/index.ts
import './less/index.less';

修改 HTML

html-webpack-plugin 会自动注入打包后的 JS 文件，无需手动编写 <script> 标签，简化后的模板代码：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>
<body>
    <h1>Hello Webpack</h1>
</body>
</html>

追加类型声明

declare module '*.less' {
  const content: Record<string, string>;
  export default content;
}

执行打包命令

保存所有更改后，在终端执行打包命令：

npm run build

打包完成后，打开 dist 目录下的 index.html：

打包工具自动生成 bundle.js 并注入到 HTML 中
页面中的 <h1> 标签字体大小生效，证明 Less 文件已成功编译并加载