Trying to adapt gulp & webpack without using coffeescript

[KeKs0r]

I am trying to replace browserify with webpack in order to get react-hot-loader working in my dev setup. Since I am already using gulp and want to stick with it for production build reasons I found this quickstart, since its also using gulp. I tried to adapt it a little bit in order to match my current setup.

2 Main differences, my development source code lives in "src" and my target of building and then serving with the webserver is "build"

I have attached my current gruntfile and webpack.config: https://gist.github.com/KeKs0r/78ce47ba2e74c4135fc0

One thing which I see is with my gulp server command, only the webdev dev server command is executed, which somehow is not building my main.js. My main javascript file is only build when using "webpack:build-dev", which is then taking 15s.

I thought the watch command alone should spin up a fully working server. Or do I need to manually build everytime beforehand?

Also when I build manually beforehand I end up in errors in webpack with this command: if ("production" !== process.env.NODE_ENV) since process.env is undefined.

[KyleAMathews]

Hmm... not entirely sure what's wrong here. I would try getting just webpack working before working on the gulp integration. One thing that you're missing is https://www.npmjs.com/package/envify-loader which is needed to get the process.env stuff working.

The watch command should be self-sufficient to get things working.

[KeKs0r]

Envify is also not in the package.json, and I also can't find any usage of it in webpack.config ..

[KyleAMathews]

Right, you have to add it. Webpack doesn't natively know how to handle stuff like process.env.NODE_ENV

[KeKs0r]

So the process.env issue can be solved with this little snippet:

{
  plugins: [
    new webpack.DefinePlugin({
      'process.env': Object.keys(process.env).reduce(function(o, k) {
        o[k] = JSON.stringify(process.env[k]);
        return o;
      }, {})
    })
  ]
}