配置webpack outputPath后HTML无法识别assets资源路径求助

问题描述 #

我对Webpack不太熟悉，需求是将HTML中的所有资源文件放入指定文件夹。我在type: assets/resource的规则下配置了generator.outputPath: 'assets/'，编译后Webpack确实创建了assets文件夹并将资源移入，但编译后的HTML无法识别资源位于assets文件夹中，请问该如何解决？

我的webpack.config.js配置代码：

const path = require('path')
const { merge } = require('webpack-merge')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')

const stylesHandler = MiniCssExtractPlugin.loader


const base = {
    entry: {
        bundle: [
            './js/main.js',
            './css/style.scss'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'docs')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            scriptLoading: 'module',
            inject: 'body'
        }),
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [stylesHandler, 'css-loader', 'postcss-loader', 'sass-loader'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    outputPath: 'assets/' // this is the new option setted
                }
            },
            {
                test: /\.html$/i,
                use: ['html-loader']
            }
        ]
    }
}

const dev = {
    devServer: {
        open: false,
        host: 'localhost',
        watchFiles: ['./index.html']
    }
}

const prod = {
    output: {
        clean: true
    }
}


module.exports = (env, args) => {
    switch (args.mode) {
        case 'development':
            return merge(base, dev)
        case 'production':
            return merge(base, prod)
        default:
            throw new Error('No matching configuration was found!')
    }
}

解决方案 #

问题出在你只指定了资源的输出目录，但没配置资源的公共访问路径——Webpack把资源移到了assets/文件夹，但HTML里的引用路径还是原来的，没加上assets/前缀，所以找不到文件。下面两种方法都能解决：

方法一：针对资源规则单独配置（推荐） #

在资源处理规则里添加generator.publicPath，让Webpack自动给HTML中的资源引用加上assets/前缀：

修改后的资源规则代码：

{
    test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
    type: 'asset/resource',
    generator: {
        outputPath: 'assets/',
        publicPath: 'assets/' // 新增这一行
    }
}

方法二：全局配置公共路径 #

如果所有输出的资源（包括JS、CSS）都需要统一的路径前缀，可以在output里设置publicPath：

修改base配置中的output部分：

output: {
    path: path.resolve(__dirname, 'docs'),
    publicPath: './assets/' // 全局添加资源路径前缀
}

这种方式适合所有资源都放在同一目录下的场景，灵活性不如方法一。

额外注意 #

如果你的CSS文件里也引用了图片、字体等资源，上面两种配置也会自动修正CSS里的资源路径，不用担心样式里的资源找不到。

修改完配置后重新编译，HTML里的资源引用就会变成assets/xxx.png这样的格式，就能正常访问了。

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