How to setup Grunt, Webpack and Babel

Question

So, I'm wondering what the best practices are for integrating Babel and Webpack with Grunt. There is a grunt-babel plugin, a grunt-webpack plugin and a babel-loader for Webpack. Should one configure Babel in Webpack, or in the Grunt config?

Front-end development is killing me.

Answer 1

I also struggled with this a while ago, but managed to find a working solution for me and my team.

Should one configure Babel in Webpack, or in the Grunt config?

Well that's completely up to, but whatever you decide: stick to it. Don't configure something there and another tool elsewhere. Do it either completely in Webpack or Grunt.

As all my projects configuration is done in the Gruntfile.js anyway, I found it convenient to define Babel (or all my plugins in general) there as well. Splitting it up in several files is just confusing.

In case anyone might try another workflow with grunt-browserify using Babel and Grunt, I wrote a little ES6 boilerplate in how to setup a proper project.