在webpack中，path和publicPath有什么区别？

Question

我有一个webpack配置文件，如下所示，它将./src/中的main.js捆绑到./lib/public中。

那么publicPath究竟是干什么用的呢？我可以看到只有path指定了js捆绑包所在的文件夹？

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'bundle.js',
    path: './lib/public/',
    publicPath: 'public'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }
    ]
  }
};

- svnm

---

我想补充一下这个问题：什么时候使用 path，什么时候使用 publicPath？ - wmock

@wmock它们是不同的，它们并不互相排斥。 - Predrag Davidovic

Answer 1

您可以使用它来定义资产（图像等）的位置。 例如，您可以通过设置它来从自定义目录或CDN加载资产。有关更多信息，请参见官方文档中的output.publicPath。

- Juho Vepsäläinen

Answer 2

扩展说明

path：是我们想要放置构建文件的绝对路径，在执行命令如： yarn build/npm run build 后，换句话说，这是硬盘上我们选择保存文件的实际位置。

例如：output: {path: path.resolve(__dirname, 'build'}。这意味着我们可以在绝对路径 /当前代码行所在路径/build/ 中找到我们构建的文件。那就是我们构建文件的实际位置。

publicPath：是您的文件将在服务器上提供服务的相对路径。

例如：output: {publicPath: '/assets/js/', filename: 'main.js'}。现在，您的文件将在服务器上以路径 /assets/js/main.js 上提供服务。

您可以使用webpack-manifest-plugin创建manifest.json文件，打开它时，您会发现每个值前都添加了publicPath到 mainfest.json文件中。

简短回答：

output.publicPath 是你的 manfiest.json 中的值，用于引用你的文件。 output.path 是构建文件的物理位置。

output.path: 'build/' 所有构建的文件都将位于 build 文件夹中。

output.publicPath: 'foo/bar' 所有文件都将通过 foo/bar 地址引用，你可以在映射清单中进行不同的映射。

- Predrag Davidovic

Answer 3

publicPath：你的公共图像、CSS文件保存在这里

path：JS构建包保存在此文件中

- vijay