Basic Webpack with ES6, JSX and React

Hi there,

I promised (sort of) on my twitter account that I will look into the integration of Webpack with ES6, JSX and React, you know, just because I read a little about Webpack and it does seems like a very nice solution for bundling JS modules and static assets while slicing them into chucks which can later be loaded on demand.
Before jumping into anything, a series of POC's is probably what you should do, so here is the first one on my behalf.

So how well and easy can Webpack be integrated with the latest out there, which is basically ES6 and React (but it does not have to be React. It can be pretty much anything)?

After playing with it for little less than an hour, I have a nice example which demonstrate how one can bring up a client to life, with ES6 and basic (I mean basic) react view, all this with the benefits of live reload. If that's interesting to you, keep reading:

BTW - All the code can be found on GitHub, so you can reference it along the way.

first off, I've created and empty folder and 'npm init' it.
Now I was able to install Webpack to the project (I generally don't install on the global scope, but you can if you have no fear of backward compatibility mess) along side with webpack-dev-server.
It is this webpack-dev-server which will enable me to listen to any change made on the source files, bundle them on the spot and render the page with the latest changes, no gulp, grunt or what-have-you involved.

Now I need a configuration file for Webpack, which defines which is the entry file, and what loaders participate on this compilation (among others). If you have no idea what those are, please read more about them on the Webpack site.
As you can see from many example on the web, the configuration file is using a CommonJS-like module system which is different than what ES6 is using, so if to be pure, the configuration file should also support the ES6 module system and for that we need to do 3 things:

• Install babel on the project using 'npm install babel --save-dev'
• Change the configuration file to export the module the way ES6 does
• Change the name of the configuration file to be "webpack.config.babel.js"

There you go, you're configuration is now pure ES6.

Now we would like to start coding the actual stuff, which is in my case a simple "Hello React" component and render it to the DOM. I created a file for the component which has JSX for displaying the caption.
At this stage you are probably wondering what takes that lovely ES6 code (not to mention that lovely JSX) and converts it to plain old ES5 - well, for this we have the Babel webpack loader. We install it using npm again, and define it on the webpack configuration (check out the code on GitHub).

The entry file now imports that component I've just made and uses React to render it to the DOM, and that's about it.
Launching the web server using the webpack-dev-server we can now safely browse to localhost:8080/webpack-dev-server and see for our eyes the wonderful caption.

Now... let me see if I forgot anything. No. I think that I have all covered so far.
If you have any comments or questions you can comment below.

Hope this helps you :)

Cheers