Django项目使用webpack编译含png资源的less文件配置问题

你遇到的图片被输出为JS代码、路径不正确的问题核心原因有两个：

• Webpack 5 已经内置了静态资源处理能力（Asset Modules），你额外引入的旧版file-loader和内置模块冲突，导致图片没有被当作二进制资源输出，反而被处理成了JS模块
• 资源的输出路径、CSS引用的公共路径配置没有对齐Django的静态目录结构，导致路径匹配错误

步骤1：移除冲突的旧依赖 #

file-loader在Webpack5中已经不再需要，先执行命令卸载：

npm uninstall file-loader

步骤2：替换webpack.config.js配置 #

将原有配置替换为以下内容，使用Webpack5内置的资源处理规则，对齐目录结构配置路径：

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

module.exports = {
    entry: {
        myappcss: "./less/index.less",
    },
    mode: "development",
    output: {
        path: path.resolve("./myapp/static/myapp/"),
        // 构建前自动清空旧产物，避免冗余文件干扰
        clean: true,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash].css',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                // 使用Webpack5内置的资源输出能力，替代file-loader
                type: 'asset/resource',
                generator: {
                    // 图片输出到static/myapp/img目录下，保留原文件名
                    // 如果需要做缓存控制，可以改成 'img/[name].[contenthash][ext]'
                    filename: 'img/[name][ext]',
                    // CSS文件位于css目录，引用img目录下资源需要回退一级
                    publicPath: '../'
                }
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                            // 保持url处理开启，webpack会自动复制资源并修正引用路径
                            url: true
                        }
                    },
                    'less-loader'
                ]
            }
        ]
    }
}

构建后预期结果 #

执行webpack构建后，产物完全符合需求：

• 编译后的CSS文件生成在./myapp/static/myapp/css/路径下，带contenthash后缀
• 图片被正确复制到./myapp/static/myapp/img/路径下，为正常可访问的图片二进制文件，不会出现JS代码内容
• CSS内的图片引用路径自动生成为../img/good-boy-cleaning.png，和目录结构匹配，Django静态资源服务可以正常加载图片

如果你需要给图片文件增加hash后缀解决缓存问题，只需要修改图片规则的filename字段即可，Webpack会自动同步更新CSS文件内的引用路径，不需要手动调整其他配置。

内容的提问来源于stack exchange，提问作者thebjorn