Express 网页包'；公共路径'；快速静态

我现在正在努力理解webpack

output.publicPath

。我现在在读书，但对我没有帮助

下面是

webpack.config.js

import webpack from 'webpack';

export default {
  output: {
    filename: 'bundle.js',
    path: '/dist',
    publicPath: '/assets'  // what's this for?
  },

  plugins: [
    // ...
  ]
};

所以我猜，这会使所有文件引用设置为publicPath的

/assets

。比如前缀

如果我想使用express server在

/assets

中提供静态文件，我应该将

/assets

设置为与

应用程序类似的静态文件。使用（'/assets'，express.static（uu dirname+'/assets'））

---

那么，

publicPath

的目的是什么？这只是路径的前缀吗？

我有点晚了，但万一有人像我一样看这个问题，希望它有个答案-

此

publicPath

被webpack用作别名，您可以通过它访问生成的文件。当您也像上面所做的那样将其附加到express静态文件服务时，您允许通过该路径请求webpack放置在那里的任何文件

---

例如，如果您有

/assets

作为您的

publicPath

和一个文件

foo.js

，该文件是在您的网页包构建过程中构建的，那么您可以通过点击

localhost:[端口]来访问它/assets/foo.js

我花了太多时间试图将我的头绕在

path

vs

publicPath

上，以至于我的头几乎要爆炸了。以下是我的理解（如果我错了，请纠正我）：

publicPath

从

index.html

文件的角度指定Web包需要引用的URL

例如：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist/assets')
    publicPath: '/assets/
  }
}

这意味着捆绑包位于文件系统中的

dist/assets

目录下，但对它的请求类似于

localhost:3000/assets/bundle.js

在

index.html

中，脚本标记如下所示：

当您从外部资源（如CDN）提供资产时，这一点更为重要

使用Express

静态
中间件所做的事情与AFAIK无关。但是我仍然将
assets
文件夹设置为根目录，从中提供静态文件