Webpack 图片

引言

Webpack 5 内置了 Asset Modules 资源模块，无需安装任何额外 Loader，即可直接处理图片、字体、音频等静态资源，支持自动将小图片转为 Base64 格式、大图片输出为独立文件，极大简化了静态资源的打包配置。

创建图片

首先，在项目的 src 目录下创建一个名为 assets 的文件夹，并将一张图片（例如 background.jpg）放入该文件夹中。

引用图片

打开 src/less/index.less 文件，设置 body 的背景图片：

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

body {
  background: url("../assets/background.jpg") no-repeat;
}

h1 {
  font-size: @size;
}

修改配置文件

打开 webpack.config.js 文件，添加资源模块规则，用于处理 png/jpg/gif/jpeg 等格式的图片文件：

// 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"]
            },
            {
                test: /\.less$/,
                // 执行顺序：less-loader → css-loader → style-loader
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                // 匹配所有图片格式文件，i 表示不区分大小写
                test: /\.(png|jpg|gif|jpeg)$/i,
                // Webpack 5 内置资源类型，自动判断资源处理方式
                type: 'asset',
                // 自定义打包输出规则
                generator: {
                    // 输出到 dist/images 目录
                    // [name]：原文件名
                    // [hash:4]：4 位哈希值，防止缓存
                    // [ext]：文件后缀名
                    filename: 'images/[name].[hash:4][ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
};

引入 Less

确保在入口文件 index.ts 中引入 index.less 文件，让 Webpack 能够识别并打包样式与图片资源：

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

修改 HTML

html-webpack-plugin 会自动注入打包后的脚本文件，无需手动添加 <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>

执行打包命令

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

npm run build

执行完命令后，进入项目的 dist 目录查看打包结果：

目录中会自动生成 images 文件夹，存放打包后的图片资源
打开 index.html，页面背景图片正常显示，证明图片资源已成功打包