HtmlWebpackPlugin生成双前导斜杠资源URL问题求助

当前HtmlWebpackPlugin生成的资源URL带双前导斜杠，示例代码如下：

<script defer src="//js/app.6f290bd2820c4c9e.bundle.js"></script>

这会导致浏览器无法正常下载资源。我的Webpack配置如下：

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './resources/html/index.html'),
        filename: 'index.html',
        inject: 'body',
    }),
],
output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].[contenthash].bundle.js',
    clean: true,
}

需要生成带单个前导斜杠的URL，且无需设置基础URL以适配staging和生产环境。

解决方法 #

在Webpack的output配置中添加publicPath: '/'即可，修改后的配置如下：

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './resources/html/index.html'),
        filename: 'index.html',
        inject: 'body',
    }),
],
output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].[contenthash].bundle.js',
    clean: true,
    publicPath: '/' // 新增该行配置
}

添加后，生成的资源URL会变成单个前导斜杠的格式：

<script defer src="/js/app.6f290bd2820c4c9e.bundle.js"></script>

这个配置不会绑定特定环境，能同时适配staging和生产环境的部署需求。

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