webpack 配置 publicPath的理解

publicPath的使用说法适用于生产环境,

默认情况下，webpack-dev-server 会把打包后的文件放到项目的根目录下，文件名是在output配置中的filename. 但是当有publicPath 配置的时候，就不一样了。

Webpack 会把所有的文件打包到publicPath指定的目录下， 就是相当于在项目根目录下创建了一个publicPath目录, 然后把打包成的文件放到了它里面，只不过我们看不到而已, 文件名还是output配置中的filename。

补充

补充：output.publicPath 是 webpack 配置中指定"产物 URL 前缀"的选项，影响：

• 构建产物中所有静态资源的引用路径（JS / CSS / 图片 / 字体）。
• webpack-dev-server 在开发时挂载资源的根路径。
• 运行时动态加载（import()、代码分割、模块联邦等）发出的请求前缀。

常见取值与场景：

• publicPath: '/'：部署到站点根目录时使用。
• publicPath: '/static/'：产物放到子目录时使用，所有 URL 会自动加上该前缀。
• publicPath: 'https://cdn.example.com/'：把静态资源发到 CDN（最常见的"动静分离"做法）。
• publicPath: 'auto'（webpack 5）：根据运行时上下文自动推断（适合动态部署到不同子路径的场景，例如 GitHub Pages）。

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    publicPath: 'https://cdn.example.com/assets/'
  }
};

注意：publicPath 必须以 / 结尾（绝对路径）或包含协议（完整 URL）；错误写法（如 './'）会让运行时去相对路径请求导致 404。

来源整理自：我的有道云笔记