带有快速静态的 Webpack 'publicPath'答案

【问题标题】：Webpack 'publicPath' with express static带有快速静态的 Webpack 'publicPath'
【发布时间】：2018-03-28 05:35:31
【问题描述】：

我现在正在尝试理解 webpack output.publicPath。我现在正在阅读webpack official docs，但它对我没有帮助。

所以这里是webpack.config.js

import webpack from 'webpack';

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

  plugins: [
    // ...
  ]
};

所以我猜，这会使所有文件引用设置为 publicPath 的/assets。比如前缀。

如果我想使用快速服务器在/assets 中提供静态文件，我应该将/assets 设置为像app.use('/assets', express.static(__dirname + '/assets')) 一样的静态文件。

那么publicPath 的目的是什么？它只是路径的前缀吗？

【问题讨论】：

标签： express webpack

【解决方案1】：

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

这个publicPath 被 webpack 用作别名，你可以通过它访问你构建的文件。当您还像上面那样将它附加到表达静态文件时，您允许通过该路径请求 webpack 放置在那里的任何文件。

例如，如果您有 /assets 作为您的 publicPath 和一个在 webpack 构建期间构建的文件 foo.js，那么您可以通过点击 localhost:[port]/assets/foo.js 来访问它

【讨论】：

【解决方案2】：

我花了很多时间试图围绕path 与publicPath 进行比较，以至于我的头几乎要爆炸了。这是我的理解（如果我错了，请纠正我）：

publicPath从index.html文件的角度指定了Webpack需要引用的URL。

例如：

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

这意味着捆绑包位于文件系统中的dist/assets 目录中，但对它的请求看起来像localhost:3000/assets/bundle.js。

在index.html 中，脚本标签将如下所示： <script type="text/javascript" src="assets/bundle.js"></script>

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

你用 Express static 中间件做什么与 AFAIK 无关。但我仍然将assets 文件夹设置为提供静态文件的根目录。

【讨论】：