title: Deploying to Heroku with Webpack
body: <p>Hy guys. So, until now I have been doing it like this. Using webpack to make a bundle file, pushing code to github and deploying to Heroku. For this to work I had to push the bundle file to github.</p>
  
  <p>Now, I would like to run webpack on Heroku. The thing is I have dependencies and devDependencies inside my package.json and if I want to run webpack on Heroku I need to install both. To do this I have to move a lot of devDependencies to dependencie so Heroku can install it and run webpack.</p>
  
  <p>What is the best way to do this?</p>
  
  <p>1) If I move all devDepend to dependencies and let Heroku make build file can I somehow clean and remove all unnecessary devDependencies afterwards?</p>
  
  <p>2) Is there a way to do it without changing my package.json or setting set NPM_CONFIG_PRODUCTION=false and disabling production environment?</p>
  
  <p>3) How would npm script look like to do this?</p>
  
  <p>4) All in all what would be a best performance optimized way to push to Heroku ?</p>
  
  <p>This is my package.json file</p>
  
  <pre><code>"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\" &amp;&amp; npm run build-server &amp;&amp; npm run build-client &amp;&amp; node ./src/build/index.js",
      "start-dev": "set \"NODE_ENV=development\" &amp;&amp; nodemon ./start-dev.js",
      "webpack": "webpack -w --config webpack.config.babel.js",
      "flow": "./node_modules/.bin/flow check",
      "test": "set \"NODE_ENV=test\" &amp;&amp; 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"
  </code></pre>