Webpack Hot Reload And Rails

Webpack seems to be getting plenty of lip service these days. Doubly so in the React community which means most of Facebook. Since Rails leans so heavily on the asset pipeline, how can we merge ES6, modules, and other bits of Webpack greatness with the age old, do one thing well: Sprockets

The following two scripts (one used for Development, the other Production), show that Webpack can easily integrate with Rail's existing asset pipeline. While giving way to utilizing many of the best features hidden in Webpack.

A few caveats about running these scripts:

1. The directory structure assumes a ./client folder, top level in your Rails app.
2. The common/development script assumes that assets will be served from a server. This means you will need a few javascript_include_tags wrapped in Rails.env
3. The two urls for this server are: http://localhost:8080/webpack-dev-server.js and http://localhost:8080/bundle.js.
4. To run the Dev script: $(npm bin)/webpack-dev-server --config webpack.config.js --hot --progress --inline --display-chunks
5. And the Prod script: $(npm bin)/webpack --config webpack.production.js
6. Currently there is only one 'entry point' defined as 'app'. This will need to be modified depending on the entry point or bootstrap script.
7. The Production script builds one file into the app/assets/javascripts directory.

That's it!