webpack打包后index.html引用文件地址问题

devtools/2024/10/18 22:29:43/
htmledit_views">

在前端开发中,src 属性指定的相对路径是相对于当前 HTML 文件的路径,而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。

当浏览器解析 HTML 文件中的 <script> 标签时,它会根据相对路径来构建请求 URL。如果你在 HTML 文件中使用了相对路径,浏览器会将这些路径解释为相对于当前 HTML 文件所在位置的路径。

例如,假设你的 HTML 文件位于 http://localhost:8080/index.html,而在该 HTML 文件中有如下的 <script> 标签:

html"><script defer="defer" src="js/chunk-vendors.10fd6bed.js"></script>
<script defer="defer" src="js/app.768bed6f.js"></script>

这里的 src 属性指定的路径 js/chunk-vendors.10fd6bed.jsjs/app.768bed6f.js 是相对于当前 HTML 文件的路径。浏览器会将这些路径解析为:

  • js/chunk-vendors.10fd6bed.js 相对于 http://localhost:8080/index.html 的路径是 http://localhost:8080/js/chunk-vendors.10fd6bed.js
  • js/app.768bed6f.js 相对于 http://localhost:8080/index.html 的路径是 http://localhost:8080/js/app.768bed6f.js

如果你希望确保脚本文件的路径是相对于网站根目录的绝对路径,可以使用以斜杠 / 开头的路径来指定:

<script defer="defer" src="/js/chunk-vendors.10fd6bed.js"></script><script defer="defer" src="/js/app.768bed6f.js"></script>

这样浏览器就会从网站的根目录开始解析路径,而不是相对于当前 HTML 文件的路径。请根据需要选择适合的路径格式来引用你的脚本文件。

在 Webpack 中设置 publicPath 的目的确实是为了定义输出资源文件的公共 URL 前缀。然而,当您在 HTML 文件中直接引用资源文件时,使用的是相对于当前 HTML 页面的路径。这意味着,如果您在 HTML 中这样写:

<script src="js/chunk-vendors.10fd6bed.js"></script>

这里的路径是相对于当前 HTML 文件的。如果 HTML 文件位于网站的根目录,那么资源文件的路径就是相对于根目录下的 js 文件夹。在这种情况下,即使您在 Webpack 配置中设置了 publicPath'./',它也不会影响 HTML 中硬编码的相对路径。

Webpack 的 publicPath 主要影响的是 Webpack 打包后的输出文件路径,特别是当您通过 Webpack 的 output 配置指定了一个输出路径时。例如:

output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js',publicPath: './' // 这里设置为当前目录
}

在上面的配置中,Webpack 会将打包后的文件放在 dist 目录下,而 publicPath: './' 指定了这些文件的公共 URL 前缀。但是,这个 publicPath 仅用于 Webpack 在生成资源链接时的前缀,比如在 HTML 文件中自动生成的 script 和 link 标签的 href 属性。如果您手动编写 HTML 并指定资源路径,那么您需要确保路径正确,并且与服务器上的资源实际位置相匹配。

如果您希望 Webpack 自动处理资源路径,可以使用 html-html" title=webpack>webpack-plugin 来生成 HTML 文件,并通过该插件配置 publicPath,这样插件会自动为您生成正确的资源链接。

const HtmlWebpackPlugin = require('html-html" title=webpack>webpack-plugin');module.exports = {// ... 其他配置plugins: [new HtmlWebpackPlugin({publicPath: './', // 这里设置为当前目录// ... 其他配置}),],// ... 其他配置
};

使用 html-html" title=webpack>webpack-plugin 时,它会根据您提供的 publicPath 自动在生成的 HTML 文件中添加正确的资源路径。如果您手动编写 HTML 并直接引用资源,那么您需要确保路径正确,并且与服务器上的资源实际位置相匹配,而不受 Webpack publicPath 配置的影响。


http://www.ppmy.cn/devtools/33429.html

相关文章

论文辅助笔记:Tempo之modules/lora.py

1 LoRALayer 基类 2 Linear 2.1 __init__ 2.2 reset_parameter & train 2.3 forward 3 MergeLinear 3.1__init__ enable_lora指定了哪些输出特征使用lora 3.2 reset_parameters & zero_pad & merge_AB 3.3 train & forward

u盘格式化后电脑读不出来怎么办?u盘格式化的东西还能恢复吗

随着科技的快速发展&#xff0c;U盘已成为我们日常生活和工作中不可或缺的数据存储工具。然而&#xff0c;有时我们可能会遇到U盘格式化后电脑无法读取的情况&#xff0c;或是误格式化导致重要数据丢失。面对这些问题&#xff0c;我们该如何应对&#xff1f;本文将为您详细解答…

项目管理-项目沟通管理

项目管理&#xff1a;每天进步一点点~ 活到老&#xff0c;学到老 ヾ(◍∇◍)&#xff89;&#xff9e; 何时学习都不晚&#xff0c;加油 1.项目沟通管理-主要内容 项目沟通管理过程--重点&#xff1a; ①ITTO 输入&#xff0c;输出工具和技术。 ②问题和解决方案。 ③论文…

建一个wordpress外贸独立站的费用构成与分析

外贸独立站因为独特的优势&#xff0c;越来越被做外贸的跨境电商所青睐。简站主题经常接到做外贸的老板咨询&#xff0c;建一个wordpress外贸独立站大约多少钱&#xff0c;也是被问的最多的问题之一。下面小简就从几个方面讲一下&#xff0c;决定一个wordpress外贸独立站的费用…

Maven介绍 主要包括Maven的基本介绍,作用,以及对应的Maven模型,可以对Maven有一个基本的了解

1、Maven介绍 1.1 什么是Maven Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 官网&#xff1a;https://maven.apache.org/ Apache 软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受欢迎的开源软件基金会&…

Stacking算法:集成学习的终极武器

Stacking算法&#xff1a;集成学习的终极武器 在机器学习的竞技场中&#xff0c;集成学习方法以其卓越的性能而闻名。其中&#xff0c;Stacking&#xff08;堆叠泛化&#xff09;作为一种高级集成技术&#xff0c;更是被誉为“集成学习的终极武器”。本文将带你深入了解Stacki…

vue - 基本使用

转载改编自&#xff1a;https://www.bilibili.com/video/BV1Ap4y1W7MG/ 文章目录 二、Composition API&#xff08;组合式API&#xff09;1、setup2、API - ref3、API - reactive &#xff08;对象&#xff09;4、API - toRefs 三、Provide与Inject&#xff08;提供/注入&#…

MATLAB实现遗传算法优化第三类生产线平衡问题

第三类生产线平衡问题的数学模型 假设&#xff1a; 工作站数量&#xff08;m&#xff09;和生产线节拍&#xff08;CT&#xff09;是预设并固定的。每个任务&#xff08;或作业元素&#xff09;只能分配到一个工作站中。任务的执行顺序是预先确定的&#xff0c;且不可更改。每…