在webpack书中，路径和publicPath有什么区别？

Question

我的webpack配置文件如下所示，它将main.js从./src/绑定到./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' }
    ]
  }
};

Answer 1

您可以使用is来定义资产的位置(图像等)。也就是说，即使通过设置资产，也可以从自定义目录或CDN加载资产。有关更多信息，请参阅正式文档中的output.publicPath。

Answer 2

publicPath：您的公共图像，css文件保存在这里

path：js构建包保存在这个文件中

Answer 3

扩展解释

路径:在执行命令(如：yarn build/npm run build )之后，是我们希望放置构建文件的绝对路径。换句话说，这是我们选择保存文件的硬盘上的物理位置。

例子：output: {path: path.resolve(__dirname, 'build'}.这意味着我们可以在:绝对路径/current路径上找到我们构建的文件，其中这一行代码是/build/。这是我们构建的文件的物理位置。

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

例子：output: {publicPath: '/assets/js/', filename: 'main.js'}.您现在服务器上的文件将在path上提供：/assets/js/main.js

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

简短回答：

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

output.path：'build/'所有您构建的文件将被定位到build文件夹中。

output.publicPath：'foo/bar'您的所有文件都将通过foo/bar地址引用，您可以在清单中以不同的方式映射该地址。