在没有服务器的情况下执行反应webpack包

我有一个简单的React应用程序，它由各种node_modules构建而成。当我将应用程序绑定到index.html和app.js并从webpack-dev-server实例提供应用程序时，应用程序运行正常。我试图直接指向chrome中的index.html文件，期望它能像平常一样运行应用程序，因为它可以访问捆绑的app.js，尽管没有加载。在没有服务器的情况下执行反应webpack包

我的问题是，webpack-dev-server提供了什么，我没有直接点击index.html文件？我会认为应用程序需要的所有东西都包含在app.js包中？

我现在没有任何静态资产需要担心，这是一个非常简单的反应应用程序，它应该呈现一些基本组件，它将显示一些文本/按钮。

控制台是空和网络选项卡看起来如下 -

来源

2017-09-25 andy mccullough

Chrome中的网络和控制台面板说了什么？你有没有得到任何加载信息？ – Peter

您可以构建静态文件，您可以在任何Web服务器上托管，但取决于您如何捆绑CSS和图像以及如何链接到主JS文件，您可能会遇到不同的问题 – Peter

@Peter，iive添加了更多细节问题 –

纠正我，如果我错了，但我觉得你只是不产生你的包。

Webpack-server使用webpack构建文件并将app.js保存在内存中。当你停止webpack-dev-server时，你的index.html可能没有app.js文件。您只需使用您的webpack配置来构建您的app.js文件。

将脚本添加到您的package.json，如：

"scripts": { 
    "build": "webpack --config directory/webpack.config.js --progress" 
},

，然后运行nam run build，它应该然后生成您的应用程序包，然后粘贴到您的index.html的目录，因此可以把它捡起来。

来源

2017-09-25 17:17:28 Tomasz

我正在做构建步骤，它正在构建一个app.js，虽然这使我认为，当我认为它通过webpack-dev-server工作时，它是我正在看到的内存包中的工作，而不是在构建过程中构建的包。 –

那是正确的。很明显，你的HTML无法找到'app.js'，否则你会在控制台中得到JS错误。这将有所帮助如果你可以显示你的文件结构和index.html。尝试清除你的浏览器缓存。 – Tomasz

在没有服务器的情况下执行反应webpack包

回答

相关问题