webpack中publicPath和contentBase的区别
Difference between publicPath and contentBase in webpack
我开始使用 webpack,现在对 publicPath 和 contentBase 感到困惑。文档在用例上不清楚。
公共路径
同时存在于 webpack 和 webpack-dev-server 中。关键字是 Output!
第一个没有开发服务器的 webpack:
假设您有一个域 example.com
并且您的网络应用程序位于 example.com/app/
。现在通常情况下,url 将是 /bundle.abc123.js
。但是通过改变 publicPath 它可以变成 /app/bundle.abc123.js
.
开发服务器
与 webpack 相同。您现在可以 运行 一个服务于 http://localhost:8080/app/
的开发服务器,非常简单!只是文件输出到哪里而已。
contentBase
仅存在于 webpack-dev-server 中。只有当你想提供静态文件时才需要它。例如,您希望 mp4 度假电影的文件夹可用于该应用程序,但您不希望通过捆绑包 运行 它们,因为那样会很愚蠢。这些资产文件几乎从不改变,但它们需要对应用程序可用。
contentBase: path.join(__dirname, 'movies')
现在您可以在您的开发服务器上使用您的应用中的那些
<video src="/movies/vacation.mp4">
所以这控制了将哪些静态文件添加到您的开发服务器。关键词输入!
contentBasePublicPath
最后我们有:
contentBasePublicPath: '/assets'
与 publicPath 相同,但仅适用于使用 contentBase 添加的文件。
<video src="/assets/movies/vacation.mp4">
我开始使用 webpack,现在对 publicPath 和 contentBase 感到困惑。文档在用例上不清楚。
公共路径
同时存在于 webpack 和 webpack-dev-server 中。关键字是 Output!
第一个没有开发服务器的 webpack:
假设您有一个域 example.com
并且您的网络应用程序位于 example.com/app/
。现在通常情况下,url 将是 /bundle.abc123.js
。但是通过改变 publicPath 它可以变成 /app/bundle.abc123.js
.
开发服务器
与 webpack 相同。您现在可以 运行 一个服务于 http://localhost:8080/app/
的开发服务器,非常简单!只是文件输出到哪里而已。
contentBase
仅存在于 webpack-dev-server 中。只有当你想提供静态文件时才需要它。例如,您希望 mp4 度假电影的文件夹可用于该应用程序,但您不希望通过捆绑包 运行 它们,因为那样会很愚蠢。这些资产文件几乎从不改变,但它们需要对应用程序可用。
contentBase: path.join(__dirname, 'movies')
现在您可以在您的开发服务器上使用您的应用中的那些
<video src="/movies/vacation.mp4">
所以这控制了将哪些静态文件添加到您的开发服务器。关键词输入!
contentBasePublicPath
最后我们有:
contentBasePublicPath: '/assets'
与 publicPath 相同,但仅适用于使用 contentBase 添加的文件。
<video src="/assets/movies/vacation.mp4">