跳到主要内容

publicPath

2024年11月23日
柏拉文
越努力,越幸运

一、认识


Webpack 中,output.publicPath 是一个配置项,指定了打包后静态资源(如 JavaScriptCSS、图片等)的公共访问路径前缀。它定义了在浏览器中加载这些资源时的路径规则。简单来说,它告诉浏览器在加载动态生成的文件(比如通过 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/" : "/",
}