webpack中publicPath和contentBase的区别

Question

我开始使用webpack，现在对publicPath和contentBase这两个概念感到困惑。文档对其用例解释不够清晰。

- Nikhil

Answer 1

publicPath

位于 webpack 和 webpack-dev-server 中。关键字是 Output!

首先，在没有 dev-server 的情况下使用 webpack：

假设您有一个域名 example.com，您的 Web 应用程序位于 example.com/app/。现在通常的 URL 为 /bundle.abc123.js。但是通过更改 publicPath，它可以变为 /app/bundle.abc123.js。

使用 Dev-server：

和 webpack 一样。您现在可以运行一个 devserver 在 http://localhost:8080/app/ 上进行服务！这仅涉及文件的输出位置。

contentBase

仅存在于 webpack-dev-server 中。仅在您想要提供静态文件时才需要。例如，您希望应用程序中有一组 mp4 假期电影文件夹，但是您不想将它们通过 bundle 运行，因为那很愚蠢。这些资产文件几乎从不更改，但是它们需要对应用程序可用。

contentBase: path.join(__dirname, 'movies')

现在你可以在开发服务器上使用它们从你的应用程序中调用。

<video src="/movies/vacation.mp4">

因此，这控制着在您的开发服务器中添加哪些静态文件。关键字Input！

contentBasePublicPath

最后，我们有：

contentBasePublicPath: '/assets'

这与publicPath相同，但仅适用于您使用contentBase添加的文件。

<video src="/assets/movies/vacation.mp4">

- ippi

---

非常感谢。文件不是很清晰，这真的帮了我很多。 - Nikhil

contentBasePublicPath 选项在 webpack4 中没有涵盖。 - liuliang

谢谢，阅读文档后我仍然不清楚它们之间的区别。 - VINIT CHURI