在前端开发中,src
属性指定的相对路径是相对于当前 html 文件的路径,而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。
当浏览器解析 html 文件中的
这里的
src
属性指定的路径js/chunk-vendors.10fd6bed.js
和js/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
如果你希望确保脚本文件的路径是相对于网站根目录的绝对路径,可以使用以斜杠 /
开头的路径来指定:
这样浏览器就会从网站的根目录开始解析路径,而不是相对于当前 html 文件的路径。请根据需要选择适合的路径格式来引用你的脚本文件。
在 webpack 中设置 publicpath
的目的确实是为了定义输出资源文件的公共 url 前缀。然而,当您在 html 文件中直接引用资源文件时,使用的是相对于当前 html 页面的路径。这意味着,如果您在 html 中这样写:
这里的路径是相对于当前 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-webpack-plugin
来生成 html 文件,并通过该插件配置 publicpath
,这样插件会自动为您生成正确的资源链接。
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports = {
// ... 其他配置
plugins: [
new htmlwebpackplugin({
publicpath: './', // 这里设置为当前目录
// ... 其他配置
}),
],
// ... 其他配置
};
使用 html-webpack-plugin
时,它会根据您提供的 publicpath
自动在生成的 html 文件中添加正确的资源路径。如果您手动编写 html 并直接引用资源,那么您需要确保路径正确,并且与服务器上的资源实际位置相匹配,而不受 webpack publicpath
配置的影响。