在前端開(kāi)發(fā)中，src 屬性指定的相對(duì)路徑是相對(duì)于當(dāng)前 HTML 文件的路徑，而不是相對(duì)于網(wǎng)站的根目錄。這種相對(duì)路徑的解析方式是瀏覽器的行為。

當(dāng)瀏覽器解析 HTML 文件中的 <script> 標(biāo)簽時(shí)，它會(huì)根據(jù)相對(duì)路徑來(lái)構(gòu)建請(qǐng)求 URL。如果你在 HTML 文件中使用了相對(duì)路徑，瀏覽器會(huì)將這些路徑解釋為相對(duì)于當(dāng)前 HTML 文件所在位置的路徑。

例如，假設(shè)你的 HTML 文件位于 http://localhost:8080/index.html，而在該 HTML 文件中有如下的 <script> 標(biāo)簽：

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

• 這里的 src 屬性指定的路徑 js/chunk-vendors.10fd6bed.js 和 js/app.768bed6f.js 是相對(duì)于當(dāng)前 HTML 文件的路徑。瀏覽器會(huì)將這些路徑解析為：
• js/chunk-vendors.10fd6bed.js 相對(duì)于 http://localhost:8080/index.html 的路徑是 http://localhost:8080/js/chunk-vendors.10fd6bed.jsjs/app.768bed6f.js 相對(duì)于 http://localhost:8080/index.html 的路徑是 http://localhost:8080/js/app.768bed6f.js

如果你希望確保腳本文件的路徑是相對(duì)于網(wǎng)站根目錄的絕對(duì)路徑，可以使用以斜杠 / 開(kāi)頭的路徑來(lái)指定：

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

這樣瀏覽器就會(huì)從網(wǎng)站的根目錄開(kāi)始解析路徑，而不是相對(duì)于當(dāng)前 HTML 文件的路徑。請(qǐng)根據(jù)需要選擇適合的路徑格式來(lái)引用你的腳本文件。

在 Webpack 中設(shè)置 publicPath 的目的確實(shí)是為了定義輸出資源文件的公共 URL 前綴。然而，當(dāng)您在 HTML 文件中直接引用資源文件時(shí)，使用的是相對(duì)于當(dāng)前 HTML 頁(yè)面的路徑。這意味著，如果您在 HTML 中這樣寫(xiě)：

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

這里的路徑是相對(duì)于當(dāng)前 HTML 文件的。如果 HTML 文件位于網(wǎng)站的根目錄，那么資源文件的路徑就是相對(duì)于根目錄下的 js 文件夾。在這種情況下，即使您在 Webpack 配置中設(shè)置了 publicPath 為 './'，它也不會(huì)影響 HTML 中硬編碼的相對(duì)路徑。

Webpack 的 publicPath 主要影響的是 Webpack 打包后的輸出文件路徑，特別是當(dāng)您通過(guò) Webpack 的 output 配置指定了一個(gè)輸出路徑時(shí)。例如：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js',
  publicPath: './' // 這里設(shè)置為當(dāng)前目錄
}

在上面的配置中，Webpack 會(huì)將打包后的文件放在 dist 目錄下，而 publicPath: './' 指定了這些文件的公共 URL 前綴。但是，這個(gè) publicPath 僅用于 Webpack 在生成資源鏈接時(shí)的前綴，比如在 HTML 文件中自動(dòng)生成的 script 和 link 標(biāo)簽的 href 屬性。如果您手動(dòng)編寫(xiě) HTML 并指定資源路徑，那么您需要確保路徑正確，并且與服務(wù)器上的資源實(shí)際位置相匹配。

如果您希望 Webpack 自動(dòng)處理資源路徑，可以使用 html-webpack-plugin 來(lái)生成 HTML 文件，并通過(guò)該插件配置 publicPath，這樣插件會(huì)自動(dòng)為您生成正確的資源鏈接。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // ... 其他配置
  plugins: [
    new HtmlWebpackPlugin({
      publicPath: './', // 這里設(shè)置為當(dāng)前目錄
      // ... 其他配置
    }),
  ],
  // ... 其他配置
};

使用 html-webpack-plugin 時(shí)，它會(huì)根據(jù)您提供的 publicPath 自動(dòng)在生成的 HTML 文件中添加正確的資源路徑。如果您手動(dòng)編寫(xiě) HTML 并直接引用資源，那么您需要確保路徑正確，并且與服務(wù)器上的資源實(shí)際位置相匹配，而不受 Webpack publicPath 配置的影響。

到此這篇關(guān)于webpack打包后index.html引用文件地址問(wèn)題的文章就介紹到這了,更多相關(guān)webpack打包index.html引用文件地址內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論