Run webpack within Rails

* Configure webpack to save assets to tmp/webpack in dev mode
* Serve assets saved under tmp/webpack using ActionDispatch::Static
* Start webpack as child process

Gemfile

@@ -34,3 +34,5 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem 'childprocess'

Gemfile.lock

@@ -74,6 +74,8 @@ GEM
     arel (7.1.4)
     builder (3.2.2)
     byebug (9.0.6)
+    childprocess (0.5.9)
+      ffi (~> 1.0, >= 1.0.11)
     concurrent-ruby (1.0.2)
     debug_inspector (0.0.2)
     erubis (2.7.0)
@@ -138,6 +140,7 @@ PLATFORMS
 
 DEPENDENCIES
   byebug
+  childprocess
   jbuilder (~> 2.5)
   listen (>= 3.0.5, < 3.2)
   pg

config/initializers/assets.rb

@@ -26,3 +26,10 @@ def read_manifest
 ActiveSupport.on_load(:action_view) do
   include WebpackAssetUrlHelper
 end
+
+Rails.application.config.middleware.insert_after Rack::Sendfile, ActionDispatch::Static, File.join(Rails.root, "tmp", "webpack")
+
+process = ChildProcess.build("webpack")
+
+process.io.inherit!
+process.start

webpack.config.js

@@ -21,6 +21,8 @@ const css_output_template = prod ? "[name]-[chunkhash].css" : "[name].css";
 const js_output_template = prod ? "[name]-[chunkhash].js" : "[name].js";
 const asset_output_template = prod ? "[name]-[hash].[ext]" : "[name].[ext]";
 
+const outputFolder = prod ? "/public/assets" : "/tmp/webpack/assets";
+
 const asset_folders = ["./app/assets", "./lib/assets", "./vendor/assets", "./node_modules"];
 
 module.exports = {
@@ -30,11 +32,13 @@ module.exports = {
   },
 
   output: {
-    path: __dirname + "/public/assets",
+    path: __dirname + outputFolder,
     publicPath: "/assets/",
     filename: js_output_template
   },
 
+  watch: true,
+
   devServer: {
     proxy: {
       '/': {