在没有服务器的情况下运行 webpack 包答案

【问题标题】：Running webpack bundle without a server在没有服务器的情况下运行 webpack 包
【发布时间】：2016-06-22 19:06:55
【问题描述】：

我有一个项目 (angularjs)，它使用 webpack 进行捆绑，它被部署到一个“发布”目录，其中 webpack 配置 output.publicPath 设置为“/”。

如果我抓取我的“发布”目录（webpack 包、index.html 和资产）的内容并将它们放在服务器（apache、iis 或 nodejs/express）目录中，效果会很好。

在以下三种情况下出现问题并获得白页：

如果我尝试从“发布”中打开 index.html 页面浏览器（无服务器）中的目录，其中 output.publicPath 设置为“/” 或者在 webpack 配置中设置一个 url (http://www.example.com/)
如果我把它放在一个移动容器中，比如科尔多瓦 output.publicPath 设置为“/”或设置为 webpack 配置中的 url
如果我将 output.publicPath 从“/”更改为 url

我的问题：

为什么在 webpack 配置中将 output.publicPath 设置为“/”而不是设置为 url (http://www.example.com/) 时 webpack 可以正常工作？

要运行 webpack 捆绑的 web 应用程序，我是否需要运行服务器（apache、iis），或者我可以点击 index.html 以在浏览器中查看应用程序，或者将其放置在移动容器中，例如作为科尔多瓦？

在我看来，我的 webpack 捆绑 web 应用程序只能在 output.publicPath 设置为“/”的情况下工作，并且还需要一个服务器才能运行。

我尝试了很多设置，只有本文开头的第一个设置适用于浏览器而非移动设备。

非常感谢任何想法！

【问题讨论】：

您能否提供用于拉入捆绑 JavaScript 的脚本标签以及您的文件夹结构？此外，您能否在浏览器中打开开发工具并列出任何控制台错误？
我已经格式化/编辑了我的问题，以更好地表明我的问题......我也在使用角度，我认为它增加了一点复杂性。

标签： angularjs node.js mobile webpack

【解决方案1】：

webpack 是否与 cordova 等移动平台容器兼容，还是我需要做一些特殊的事情才能让它工作？

是的，您可以毫无问题地将 webpack 与 cordova 一起使用。你可以查看这个 repo https://github.com/uhlryk/my-cordova-react-boilerplate（这是我的 repo，但在 github 中还有许多其他用于 cordova 的 webpack bundle 示例）

要运行 webpack 捆绑应用程序，我是否必须拥有服务器（apache、iis）或者我可以单击 index.html 来查看应用程序吗？

这取决于您在那里的详细信息。但是可以单击 index.html 并运行应用程序。检查我的另一个 repo https://github.com/uhlryk/react-dynamic-number 并查看示例 - http://htmlpreview.github.io/?https://github.com/uhlryk/react-dynamic-number/blob/master/example/index.html 您只需单击 example/index.html 并响应应用程序（webpack 包）即可。

【讨论】：

我已经格式化/编辑了我的问题，以更好地表明我的问题......我也在使用角度，我认为它增加了一点复杂性。

【解决方案2】：

我在没有服务器的情况下打开 index.html 时遇到了同样的问题。我的原因是它在错误的地方寻找依赖项（开发工具控制台错误）：

我使用这个生成器来创建我的应用程序：https://github.com/shibbir/generator-angular2-typescript

显然它会在“根”(/) 位置查找文件，但当您从文件系统打开时会失败（除非文件位于您的根文件夹中）。

【讨论】：