在没有服务器的情况下执行反应webpack包
我有一个简单的React
应用程序,它由各种node_modules
构建而成。当我将应用程序绑定到index.html
和app.js
并从webpack-dev-server
实例提供应用程序时,应用程序运行正常。我试图直接指向chrome中的index.html
文件,期望它能像平常一样运行应用程序,因为它可以访问捆绑的app.js
,尽管没有加载。在没有服务器的情况下执行反应webpack包
我的问题是,webpack-dev-server
提供了什么,我没有直接点击index.html
文件?我会认为应用程序需要的所有东西都包含在app.js
包中?
我现在没有任何静态资产需要担心,这是一个非常简单的反应应用程序,它应该呈现一些基本组件,它将显示一些文本/按钮。
控制台是空和网络选项卡看起来如下 -
纠正我,如果我错了,但我觉得你只是不产生你的包。
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
的目录,因此可以把它捡起来。
我正在做构建步骤,它正在构建一个app.js,虽然这使我认为,当我认为它通过webpack-dev-server工作时,它是我正在看到的内存包中的工作,而不是在构建过程中构建的包。 –
那是正确的。很明显,你的HTML无法找到'app.js',否则你会在控制台中得到JS错误。这将有所帮助如果你可以显示你的文件结构和index.html。尝试清除你的浏览器缓存。 – Tomasz
Chrome中的网络和控制台面板说了什么?你有没有得到任何加载信息? – Peter
您可以构建静态文件,您可以在任何Web服务器上托管,但取决于您如何捆绑CSS和图像以及如何链接到主JS文件,您可能会遇到不同的问题 – Peter
@Peter,iive添加了更多细节问题 –