I keep coming across dozens of template Webpack configs with all kinds of flim flam. For the benefit of others (but also my future self), here’s my no-monkey-business, dead simple Webpack + React setup I’ve used to get started on a number of projects.
First, we’ll start with the
package.json dependencies (versions removed):
Let’s break it down:
path module is the core Node path module which makes working with path names easy and consistent.
webpack are the stars of the show.
webpack-dev-server handles the development live-reload goodness.
babel-loader, the main Babel library and its Webpack loader respectively. In addition, we’ll use
babel-preset-react to handle modern JS syntax and React code.
HtmlWebpackPlugin takes your main HTML file and generates a new HTML file with the script tags baked in. After Webpack performs its transformations, you don’t have to sweat updating the script tags with the transformed entry point filename. This is especially useful for fingerprinted bundles with a hash in the filename that changes on every compilation.
The directory structure starts out as something to the tune of:
Now all we have to do is configure it. Here’s the
To start developing, hook up
npm start. That’s it. Fin. Go have fun writing React.