A dead simple Webpack + React install

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):

"dependencies": {
    "html-webpack-plugin",
    "path",
    "react",
    "react-dom",
    "webpack",
    "webpack-dev-server"
  },
  "devDependencies": {
    "babel-core",
    "babel-loader",
    "babel-preset-es2015",
    "babel-preset-react"
  }

Let’s break it down:

The path module is the core Node path module which makes working with path names easy and consistent.

react react-dom and webpack are the stars of the show.

webpack-dev-server handles the development live-reload goodness.

We’ll use babel-core and babel-loader, the main Babel library and its Webpack loader respectively. In addition, we’ll use babel-preset-es2015 and babel-preset-react to handle modern JS syntax and React code.

The 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:

client/
    index.html
    index.js
package.json
webpack.config.js
.babelrc
.gitignore

Now all we have to do is configure it. Here’s the webpack.config.js:

To start developing, hook up webpack-dev-server:

"scripts": {
    "start": "webpack-dev-server"
  }

and npm start. That’s it. Fin. Go have fun writing React.