webpack HtmlWebpakPlugin生成带有前导双斜线的捆绑资产url

pgky5nke 于 2023-01-02 发布在 Webpack

关注(0)|答案(1)|浏览(135)

不知何故HtmlWebpack插件正在生成一个带有前导双斜线的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,
}

我只需要有一个单一的领先斜线正在生成的网址正常工作，更好地，如果没有设置任何基本网址，使代码仍然工作的阶段和生产编译。

webpack

来源：https://stackoverflow.com/questions/74951788/htmlwebpakplugin-generating-bundled-asset-url-with-leading-double-slash

1条答案

按热度按时间

yvt65v4c1#

您需要设置publicPath以覆盖将/添加到任何非空字符串的默认设置。

output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].[contenthash].bundle.js',
    clean: true,
    publicPath: ''
}

利用这种配置，输出将是：
<script defer src="/js/app.6f290bd2820c4c9e.bundle.js"></script>
在URL中具有单个/。
这是因为：

let publicPath = typeof compilation.options.output.publicPath !== 'undefined' 
   // If a hard coded public path exists use it 
   ? compilation.mainTemplate.getPublicPath({hash: compilationHash}) 
   // If no public path was set get a relative url path 
   : path.relative(path.resolve(compilation.options.output.path, path.dirname(self.childCompilationOutputName)), compilation.options.output.path) 
     .split(path.sep).join('/'); 
  
 if (publicPath.length && publicPath.substr(-1, 1) !== '/') { 
   publicPath += '/'; 
 }

参考：https://github.com/jantimon/html-webpack-plugin/blob/8440e4e3af94ae5dced4901a13001c0628b9af87/index.js#L411-L420

赞(0）回复(0）举报 2023-01-02

我来回答

webpack HtmlWebpakPlugin生成带有前导双斜线的捆绑资产url

1条答案

相关问题

热门标签

最新问答