Question

我现在正试图理解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: [
    // ...
  ]
};

所以我想，这会使所有文件引用/assets，并将其设置为publicPath。喜欢前缀。

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

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

Answer 1

我来晚了，但是如果其他人像我一样看着这个问题，希望它能回答-

webpack将此publicPath用作别名，通过它可以访问构建的文件。像上面一样，当您附加它以表示静态文件服务时，则允许通过该路径请求webpack放置在其中的所有文件。

例如，如果您将/assets作为publicPath，并且在Webpack构建期间构建了文件foo.js，则可以通过点击localhost:[port]/assets/foo.js < / p>

Answer 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文件夹设置为从中提供静态文件的根目录。

Webpack＆＃39; publicPath＆＃39;用快速静态

2 个答案: