Webpack中publicPath 的意义与用法

这几天在用COS对象存储做一个静态网站资源的时候，正好有用到了，随手做个小结水一下：

1. 什么是 publicPath？

publicPath 定义了Webpack编译后的资源应该在哪里被访问，它决定了浏览器如何从服务器上加载资源。
例如，当你的应用的 JS、图片或 CSS 被 Webpack 打包后，这些文件需要被引用和加载。这里，publicPath 就是决定这些资源的基础路径的。

2. 路径示例

下面是我在基于CRA脚手架创建的react18项目中打包出来的html

可以看到，默认打包出来的html中引用的资源都是绝对路径，这也就是为什么我们把build中的html放到浏览器中无法直接打开的原因

当把publicPath值修改为 ./ 即相对路径后，再看下打包结果:

此时便能正常加载资源了

3. CDN 和 publicPath

当使用 CDN 时，或者对象储存的时候publicPath 特别有用。你可以设置它以指向你的 CDN 地址：

module.exports = {
  //...
  output: {
    publicPath: 'https://xxxxxxx/'
  }
};

如果场景比较简单又希望能快速修改的话，也可以在执行打包命令的时候注入修改

"build": "cross-env PUBLIC_URL=https://xxxxx.myqcloud.com react-scripts build",

这样，当你的应用加载资源时，它们会直接从 CDN 加载，提高了加载速度。