使用 Webpack 部署到 Heroku

Question

大家好。所以，直到现在我一直在这样做。使用 webpack 制作 bundle 文件，将代码推送到 github 并部署到 Heroku。为此，我必须将捆绑文件推送到 github。

现在，我想在 Heroku 上运行 webpack。问题是我的 package.json 中有依赖项和 devDependencies，如果我想在 Heroku 上运行 webpack，我需要同时安装两者。为此，我必须将大量 devDependencies 移动到依赖项，以便 Heroku 可以安装它并运行 webpack。

最好的方法是什么？

1) 如果我将所有 devDepend 移动到依赖项并让 Heroku 生成构建文件，我可以以某种方式清理并删除所有不必要的 devDependencies 吗？

2) 有没有办法在不更改我的 package.json 或设置 set NPM_CONFIG_PRODUCTION=false 并禁用生产环境的情况下做到这一点？

3) npm 脚本会如何执行此操作？

4) 总而言之，什么是推送到 Heroku 的最佳性能优化方式？

这是我的 package.json 文件

"scripts": {
    "clean-client": "rm -rf ./src/dist",
    "clean-server": "rm -rf ./src/build",
    "build-server": "babel src/server -d src/build -s --copy-files",
    "build-client": "webpack -p --config webpack.config.prod.babel.js",
    "start": "set \"NODE_ENV=production\" && npm run build-server && npm run build-client && node ./src/build/index.js",
    "start-dev": "set \"NODE_ENV=development\" && nodemon ./start-dev.js",
    "webpack": "webpack -w --config webpack.config.babel.js",
    "flow": "./node_modules/.bin/flow check",
    "test": "set \"NODE_ENV=test\" && babel-tape-runner -r \"test/setup.js\" \"test/**/*.test.jsx\" | node_modules/.bin/tap-spec",
    "coverage": "babel-node node_modules/babel-istanbul/lib/cli.js cover node_modules/babel-tape-runner/bin/babel-tape-runner -- \"test/setup.js\" -- \"test/**/*.test.jsx\""
  },
  "dependencies": {
    "babel-plugin-react-css-modules": "2.7.0",
    "babel-runtime": "^6.23.0",
    "ejs": "^2.5.6",
    "express": "^4.15.2",
    "prop-types": "^15.5.8",
    "react": "15.5.4",
    "react-dom": "15.5.4",
    "react-router": "3.0.4"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-istanbul": "^0.12.2",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "babel-tape-runner": "^2.0.1",
    "bootstrap": "v4.0.0-alpha.6",
    "browser-sync": "^2.18.8",
    "browser-sync-webpack-plugin": "^1.1.4",
    "css-loader": "0.28.0",
    "enzyme": "^2.8.2",
    "eslint": "^3.18.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-flowtype": "^2.32.1",
    "eslint-plugin-react": "^6.10.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "flow-bin": "^0.45.0",
    "ignore-styles": "^5.0.1",
    "jquery": "^3.2.1",
    "jsdom": "^10.1.0",
    "jsdom-global": "^3.0.2",
    "node-sass": "^4.5.2",
    "nodemon": "^1.11.0",
    "postcss": "^6.0.1",
    "postcss-cssnext": "2.10.0",
    "postcss-loader": "^2.0.5",
    "postcss-scss": "^1.0.0",
    "react-test-renderer": "^15.5.4",
    "sass-loader": "^6.0.3",
    "sass-resources-loader": "^1.2.1",
    "script-loader": "^0.7.0",
    "sinon": "^2.2.0",
    "sinon-test": "^1.0.2",
    "snazzy": "^7.0.0",
    "standard": "^10.0.2",
    "style-loader": "^0.17.0",
    "tap-spec": "^4.1.1",
    "tape": "^4.6.3",
    "tether": "^1.4.0",
    "webpack": "^2.4.1"

Answer 1

这个问题有点老了，但希望我的通知可以帮助某人。这是先前建议的解决方案的替代方案（未尝试）。

要直接在 heroku 上构建您的项目，只需将构建脚本添加到您的 package.json 文件中。

"scripts": {
"build": "webpack --config webpack.config.js",

},

我有很多 devDevependecies，包括我没有在全球范围内安装的 webpack-cli。在添加脚本之前，我必须构建项目并推送，添加后我注意到 heroku 只是自动运行它，并且该过程的输出与本地机器上的相同。这里的关键可能是 build 关键字！！！

Answer 2

根据this guide，您必须将 NPM_CONFIG_PRODUCTION 设置为“false”并将 NODE_ENV 设置为“development”，以便使用npm install 安装 devDependencies。如果您没有按照指南使用 Heroku 的评论应用程序，我相信you can set these environment variables via your apps dashboard。

披露：我编写了指南。