Webpack 5 中 output.publicPath 与 devServer.publicPath 的区别与配置

一. output的publicPath

在output配置中，path属性用于指定打包后静态资源（如静态资源的js、css）输出的目录，通常设置为dist、build文件夹等文件夹；

output配置中还包含一个publicPath属性，用于指定index.html文件中引用打包资源时的基本路径前缀；

• 该属性默认值为空字符串，因此打包后引入JS文件时，路径直接为 bundle.js；

• 开发环境中，通常将其设置为 /，此时路径变为 /bundle.js，浏览器会基于当前域名和路径请求对应资源；
• 若希望打包后的HTML文件在本地直接双击打开运行，需将其设置为 ./，此时浏览器会依据./bundle.js相对路径去查找资源；

具体配置示例如下：

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    // 在打包之后的静态资源前面进行一个路径的拼接:
     publicPath: "./"
  },
  }

打包生成的文件结构如下：

二. devServer的publicPath

devServer配置中也存在一个publicPath属性，用于指定在开发环境运行 webpack serve 时，本地服务提供的资源文件夹前缀；

• 其默认值为 /，即直接访问端口即可获取资源，例如 http://localhost:8080；
• 若将其设置为 /abc，则需通过 http://localhost:8080/abc 才能访问到对应的打包资源；

配置示例如下：

module.exports = {
  // watch: true,
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    // 在打包之后的静态资源前面进行一个路径的拼接
     publicPath: "/abc" //和下方publicPath设置一样
  },
  // 专门为webpack-dev-server
  // devServer为开发过程中, 开启一个本地服务
  devServer: {
    compress: true, //文件压缩启用 [gzip compression]
    publicPath: "/abc",
    }，
  }

官方文档指出：devServer.publicPath 应与 output.publicPath 保持一致；

打包后的实际访问路径如下：

注意：当 devServer 的 publicPath 设置为 /abc 时，若仍通过 http://localhost:8080/bundle.js 访问，将无法找到资源并报错；

因此，devServer.publicPath 与 output.publicPath 的设置必须保持一致；

以上为Webpack 5中output与devServer的publicPath区别详解，更多相关配置资料请关注本站其他文章！