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

ops/2024/9/24 17:30:58/
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/ops/33483.html

相关文章

Android学习系列目录

Android学习1 -- 从嵌入式Linux到嵌入式Android-CSDN博客 Android学习2 -- SDK 1&#xff08;概览&#xff09;-CSDN博客 Android学习3 -- SDK2 &#xff08;实操三个小目标&#xff09;-CSDN博客 Android学习4 -- ADB的使用-CSDN博客 Android学习5 -- HAL-1 概述-CSDN博客…

吉时利2450源表如何调整电流精度?

吉时利2450源表是一款高精度的电流源表&#xff0c;可用于精确控制和测量电流。调整电流精度是确保吉时利2450源表准确输出所需电流的关键步骤。本文将介绍吉时利2450源表如何调整电流精度的方法和注意事项。 准备工作 在开始调整电流精度之前&#xff0c;确保吉时利2450源表…

《Redis使用手册之HyperLog与地理坐标应用》

《Redis使用手册之HyperLog与地理坐标》 目录 **《Redis使用手册之HyperLog与地理坐标》****PFADD&#xff1a;对集合元素进行计数****PFCOUNT&#xff1a;返回集合的近似基数****PFMERGE&#xff1a;计算多个HyperLogLog的并集****GEOADD&#xff1a;存储坐标****GEOPOS&#…

【C++】详解STL的容器之一:list

目录 简介 初识list 模型 list容器的优缺点 list的迭代器 常用接口介绍 获取迭代器 begin end empty size front back insert push_front pop_front push_back pop_back clear 源代码思路 节点设计 迭代器的设计 list的设计 begin() end() 空构造 ins…

【DevOps】Jenkins 集成Docker

目录 1. 安装 Docker 和 Jenkins 2. 在 Jenkins 中安装 Docker 插件 3. 配置 Docker 连接 4. 创建 Jenkins Pipeline 5. 示例 Pipeline 脚本 6. 运行 Jenkins Job 7. 扩展功能 8、docker配置测试连接的时候报错处理 将 Docker 与 Jenkins 集成可以实现持续集成和持续交…

Transformer中的数据输入构造

文章目录 1. 文本内容2. 字典构造2.1 定义一个类用于字典构造2.2 拆分文本2.3 构造结果 3. 完整代码 1. 文本内容 假如我们有如下一段文本内容&#xff1a; Optics It is the branch of physics that studies the behaviour and properties of light . Optical Science 这段…

室外巡检机器人——A2型高防护轮式巡检机器人

在科技日新月异的时代&#xff0c;室外巡检机器人犹如一位无畏的守护者&#xff0c;悄然出现在我们的视野之中。它迈着坚定的步伐&#xff0c;穿梭于各种复杂的室外环境&#xff0c;承担着重要的巡检任务。它是科技与智慧的结晶&#xff0c;是保障安全与稳定的前沿力量。让我们…

XXL-JOB定时任务

1. xxl-job初识 1.1 xxl-job介绍 xxl-job 是大众点评大佬徐雪里开源的一款分布式任务调度框架&#xff0c;具有简单易用、轻量级、可扩展的特点。相比于Spring Task, Quartz&#xff0c;xxl-job有记录执行日志和运行大盘&#xff0c;方便开发人员和运维人员更好的管理任务。 …