使用webpack和node.js运行Heroku

首先是上下文，这是我的文件结构：

bundle.js package.json package-lock.json .gitignore /.git /node_modules /src form.js form.css index.html json.js 

这是我的package.json ：

 { "name": "transcriber-form-helper", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node node_modules/webpack/bin/webpack.js ./src/form.js bundle.js" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.2.1" }, "devDependencies": { "css-loader": "^0.28.7", "style-loader": "^0.19.0", "webpack": "^3.8.1" }, "engines": { "node": "6.12.0" } } 

我有一个工作的应用程序（意思是如果我运行index.html ，它运行正确），我用node.js依赖关系构build。 我也试图使用webpack，但我不完全理解，所以我非常怀疑这是我的问题的来源。 据我所知， node.js在npm start上运行start脚本， start脚本运行webpack将/src/form.js及其所有的依赖项编译成一个输出bundle.js 。

这是这个bundle.js作为脚本链接在我的index.html中。

我试图在Heroku部署上运行这个。 我创build了一个全新的文件夹和git init 。 我犯了所有的文件，并跑了一个heroku create ，随后推挤所有与git push heroku master 。 结果如下：

 remote: Compressing source files... done. remote: Building source: remote: remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NPM_CONFIG_PRODUCTION=false remote: NODE_VERBOSE=false remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: remote: -----> Installing binaries remote: engines.node (package.json): 6.12.0 remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 6.12.0... remote: Downloading and installing node 6.12.0... remote: Detected package-lock.json: defaulting npm to version 5.xx remote: Bootstrapping npm 5.xx (replacing 3.10.10)... remote: npm 5.5.1 installed remote: remote: -----> Restoring cache remote: Skipping cache restore (new-signature) remote: remote: -----> Building dependencies remote: Installing node modules (package.json + package-lock) remote: remote: > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_5f7197c56e4eae8677e4d73562940ae8/node_modules/uglifyjs-webpack-plugin remote: > node lib/post_install.js remote: remote: added 392 packages in 9.621s remote: remote: -----> Caching build remote: Clearing previous node cache remote: Saving 2 cacheDirectories (default): remote: - node_modules remote: - bower_components (nothing to cache) remote: remote: -----> Build succeeded! remote: -----> Discovering process types remote: Procfile declares types -> (none) remote: Default types for buildpack -> web remote: remote: -----> Compressing... remote: Done: 24.9M remote: -----> Launching... remote: Released v9 remote: https://calm-beyond-56449.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. 

据我所知，没有什么是错的，对吗？

以下是部署后的Heroku logs --tail 。

 2017-11-23T16:39:06.000000+00:00 app[api]: Build started by user <my email here> 2017-11-23T16:39:48.456625+00:00 app[api]: Release v9 created by user <my email here> 2017-11-23T16:39:48.456625+00:00 app[api]: Deploy b38385b7 by user <my email here> 2017-11-23T16:39:06.000000+00:00 app[api]: Build succeeded 2017-11-23T16:39:49.649609+00:00 heroku[web.1]: State changed from crashed to starting 2017-11-23T16:39:52.613766+00:00 heroku[web.1]: Starting process with command `npm start` 2017-11-23T16:39:55.858825+00:00 app[web.1]: 2017-11-23T16:39:55.858824+00:00 app[web.1]: > node node_modules/webpack/bin/webpack.js ./src/form.js bundle.js 2017-11-23T16:39:55.858823+00:00 app[web.1]: > transcriber-form-helper@1.0.0 start /app 2017-11-23T16:39:55.858811+00:00 app[web.1]: 2017-11-23T16:39:58.414268+00:00 app[web.1]: Hash: e0226ff21cf9f346ae14 2017-11-23T16:39:58.414289+00:00 app[web.1]: Time: 1450ms 2017-11-23T16:39:58.414286+00:00 app[web.1]: Version: webpack 3.8.1 2017-11-23T16:39:58.414292+00:00 app[web.1]: bundle.js 299 kB 0 [emitted] [big] main 2017-11-23T16:39:58.414291+00:00 app[web.1]: Asset Size Chunks Chunk Names 2017-11-23T16:39:58.414294+00:00 app[web.1]: [1] ./src/json.js 9.42 kB {0} [built] 2017-11-23T16:39:58.414296+00:00 app[web.1]: [3] ./node_modules/style-loader!./node_modules/css-loader!./src/form.css 1.01 kB {0} [built] 2017-11-23T16:39:58.414294+00:00 app[web.1]: [0] ./src/form.js 2.68 kB {0} [built] 2017-11-23T16:39:58.414298+00:00 app[web.1]: [4] ./node_modules/css-loader!./src/form.css 474 bytes {0} [built] 2017-11-23T16:39:58.414299+00:00 app[web.1]: + 4 hidden modules 2017-11-23T16:39:58.558119+00:00 heroku[web.1]: State changed from starting to crashed 2017-11-23T16:39:58.542644+00:00 heroku[web.1]: Process exited with status 0 

它似乎已经坠毁。 运行Heroku ps: scale web=1 ，然后Heroku open导致错误：

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.

此外，我已经运行heroku config:set NPM_CONFIG_PRODUCTION=false包含devDependencies。

不知道是否有任何其他文件与问题相关，但我会包括我认为是每个文件中的连接东西的小节选：

form.js ：

 var templates = require('./json.js'); var $ = require('jquery'); require('style-loader!css-loader!./form.css'); 

index.html ：

 <!DOCTYPE html> <meta charset="utf-8"/> <html> <head> <title>Pejman's TranscribersOfReddit form helper</title> </head> <body> <h1>/r/TranscribersOfReddit form helper</h1> <hr><br> <div id="form"></div> <br> <div id="form_content"></div> <br> <input type="submit" id="btn_generate" value="Generate" /> <input type="submit" id="btn_reset" value="Reset" /> <br><br> <textarea rows=10 cols=80 id="output"></textarea> <br> <input type="submit" id="btn_copy" value="Copy to Clipboard" /> <script src="../bundle.js" charset="utf-8"></script> </body> </html>