React How to setup a basic webpack, react and babel environment
Remarks
This build pipeline is not exactly what you would call "production ready" but it does give a solid start for you to add on to it the things that you need in order to get the development experience you're looking for. The approach that some people take (including myself at times) is to take a fully built up pipeline of Yeoman.io or somewhere else and then strip off the things they don't want until it suits there style. There's nothing wrong with this but perhaps with the example above you could opt for the opposite approach and build up from bare bones.
Some things you might like to add are things like a testing framework and coverage statistics like Karma with Mocha or Jasmine. Linting with ESLint. Hot module replacement in webpack-dev-server so that you can get that Ctrl+S, F5 development experience. Also the current pipeline only builds in dev mode so a production build task would be good.
Gotchas!
Notice in the context property of the webpack.config.js we have used the node path module to define our path rather than just concatenating __dirname to the string /src this is because windows hates forward slashses. So to make the solution more cross platform compatible use leverage node to help us.
Explanation of webpack.config.js properties
context
This is the filepath for which webpack will use as it's root path for the purposes of resolving relative file paths. So in index.jsx where we use require('./index.html') that dot actually resolves to the src/ directory because we've defined it as such in this property.
entry
Where webpack looks first to begin bundling the solution. This is why you'll see that in the index.jsx we are stitching together the solution with requires and imports.
output
This is where we define where webpack should be dropping the file files it has found to bundle. We have also defined a name for the file in which our bundled javascript and styles will be dropped.
devServer
These are settings specific to webpack-dev-server. The contentBase defines where the server should make it's root, we've defined the dist/ folder as our base here. The port is the port that the server will be hosted on. open is what is used to instruct webpack-dev-server to open your default browser for you once it's spun up the server.
module > loaders
This defines a mapping for webpack to use so that is knows what to do when it finds different files. The test property gives regex for webpack to use to determine if it should apply this module, in most cases we've matches on file extensions. loader or loaders give the name of the loader module that we'd like to use to load the file into webpack and let that loader take care of the bundling of that file type. There is also a query property on the javascript, this just provides a query string to the loader, so we could have probably used a query property on the html loader as well if we wanted to. It's just a different way of doing things.
