publicPath
2024年11月23日
一、认识
在 Webpack
中,output.publicPath
是一个配置项,指定了打包后静态资源(如 JavaScript
、CSS
、图片等)的公共访问路径前缀。它定义了在浏览器中加载这些资源时的路径规则。简单来说,它告诉浏览器在加载动态生成的文件(比如通过 import()
的懒加载文件)或其他静态资源时,该从哪里获取这些资源。
二、 语法
module.exports = {
output: {
publicPath: 'auto', // 默认值
publicPath: 'https://cdn.example.com/assets/', // CDN(总是 HTTPS 协议)
publicPath: '//cdn.example.com/assets/', // CDN(协议相同)
publicPath: '/assets/', // 相对于服务(server-relative)
publicPath: 'assets/', // 相对于 HTML 页面
publicPath: '../assets/', // 相对于 HTML 页面
publicPath: '', // 相对于 HTML 页面(目录相同)
},
};
三、场景
3.1 CDN
如果资源存储在 CDN
中:
output: {
publicPath: "https://cdn.example.com/assets/", // 指定 CDN 地址
}
生成的文件中可能会有这样的引用:
<script src="https://cdn.example.com/assets/main.js"></script>
3.2 服务器
资源文件被存储在服务器的 /assets/
目录下,配置如下:
output: {
publicPath: "/assets/", // 加载资源时会从 "/assets/" 开始
}
生成的文件中可能会有这样的引用:
<script src="/assets/main.js"></script>
3.3 按需加载模块
output.publicPath
还会影响动态模块的加载路径。例如:
output: {
publicPath: "/static/",
}
动态加载模块时,浏览器会从 /static/
获取相关文件:
import("./someModule").then((module) => {
// 模块加载完成后使用
});
Webpack
会生成类似如下的代码:
__webpack_require__.p = "/static/";
3.4 根据环境动态配置
你可能希望在开发和生产环境下使用不同的 publicPath
:
output: {
publicPath: process.env.NODE_ENV === "production" ? "https://cdn.example.com/" : "/",
}