Add HMR to the dev server (#641)

* Add HMR

* Fix development.js changes

* Update sass loader and remove redundant config from vue loader

* Remove redundant variables

* Update condition for extracting CSS

* Update readme and changelog

* Fix typo

* Make linter happy

* Add a comment for HMR mode

Lowercase

* Add a note to turn off HMR

* Fix wording

Author: David Heinemeier Hansson

CHANGELOG.md

@@ -27,6 +27,8 @@
 
 - Move dev-server config options under defaults so it's transparently available in all environments
 
+- Add new `HMR` option for hot-module-replacement
+
 
 ### Removed
 

README.md

@@ -330,11 +330,12 @@ Similary you can also control and configure `webpack-dev-server` settings from `
 # config/webpacker.yml
 development:
   dev_server:
-    host: 0.0.0.0
+    host: localhost
     port: 8080
-    https: false
 ```
 
+If you have `hmr` turned to true, then the `stylesheet_pack_tag` generates no output, as you will want to configure your styles to be inlined in your JavaScript for hot reloading. During production and testing, the `stylesheet_pack_tag` will create the appropriate HTML tags.
+
 #### Resolved Paths
 
 If you are adding webpacker to an existing app that has most of the assets inside
@@ -398,26 +399,23 @@ plugins:
 Webpacker out-of-the-box provides CDN support using your Rails app `config.action_controller.asset_host` setting. If you already have [CDN](http://guides.rubyonrails.org/asset_pipeline.html#cdns) added in your rails app
 you don't need to do anything extra for webpacker, it just works.
 
-### HTTPS in development
-
-If you're using the `webpack-dev-server` in development, you can serve views over HTTPS
-by setting the `https` option for `webpack-dev-server` to `true` in `config/webpacker.yml`,
-then start the dev server as usual with `./bin/webpack-dev-server`.
-
-Please note that the `webpack-dev-server` will use a self-signed certificate,
-so your web browser will display a warning upon accessing the page.
-
-
 ### Hot module replacement
 
-Webpacker out-of-the-box doesn't ship with HMR just yet. You will need to
-install additional plugins for Webpack if you want to add HMR support.
+Webpacker out-of-the-box supports HMR with `webpack-dev-server` and
+you can toggle it by setting `dev_server/hmr` option inside webpacker.yml.
 
-You can checkout these links on this subject:
+Checkout this guide for more information:
 
 - https://webpack.js.org/configuration/dev-server/#devserver-hot
+
+To support HMR with React you would need to add `react-hot-loader`. Checkout this guide for
+more information:
+
 - https://webpack.js.org/guides/hmr-react/
 
+**Note:** Don't forget to disable `HMR` if you are not running `webpack-dev-server`
+otherwise you will get not found error for stylesheets.
+
 
 ## Linking Styles, Images and Fonts
 

lib/install/config/loaders/core/sass.js

@@ -1,18 +1,31 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const path = require('path')
-const { env } = require('../configuration.js')
+const { env, settings } = require('../configuration.js')
 
 const postcssConfigPath = path.resolve(process.cwd(), '.postcssrc.yml')
+const isProduction = env.NODE_ENV === 'production'
+const extractCSS = !settings.dev_server.hmr
 
-module.exports = {
+const extractOptions = {
+  fallback: 'style-loader',
+  use: [
+    { loader: 'css-loader', options: { minimize: isProduction } },
+    { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } },
+    'resolve-url-loader',
+    { loader: 'sass-loader', options: { sourceMap: true, indentedSyntax: true } }
+  ]
+}
+
+// For production extract styles to a separate bundle
+const extractCSSLoader = {
+  test: /\.(scss|sass|css)$/i,
+  use: ExtractTextPlugin.extract(extractOptions)
+}
+
+// For hot-reloading use regular loaders
+const inlineCSSLoader = {
   test: /\.(scss|sass|css)$/i,
-  use: ExtractTextPlugin.extract({
-    fallback: 'style-loader',
-    use: [
-      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
-      { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } },
-      'resolve-url-loader',
-      { loader: 'sass-loader', options: { sourceMap: true } }
-    ]
-  })
+  use: ['style-loader'].concat(extractOptions.use)
 }
+
+module.exports = isProduction || extractCSS ? extractCSSLoader : inlineCSSLoader

lib/install/config/loaders/installers/react.js

@@ -1,5 +1,11 @@
+const { join } = require('path')
+const { settings } = require('../configuration.js')
+
 module.exports = {
   test: /\.(js|jsx)?(\.erb)?$/,
   exclude: /node_modules/,
-  loader: 'babel-loader'
+  loader: 'babel-loader',
+  options: {
+    cacheDirectory: join(settings.cache_path, 'babel-loader')
+  }
 }

lib/install/config/loaders/installers/vue.js

@@ -1,41 +1,12 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const { env } = require('../configuration.js')
+const { env, settings } = require('../configuration.js')
 
-// Change it to false if you prefer Vue styles to be inlined by javascript in runtime
-const extractStyles = false
-
-const cssLoader = [
-  { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
-  { loader: 'postcss-loader', options: { sourceMap: true } },
-  'resolve-url-loader'
-]
-const sassLoader = cssLoader.concat([
-  { loader: 'sass-loader', options: { sourceMap: true, indentedSyntax: true } }
-])
-const scssLoader = cssLoader.concat([
-  { loader: 'sass-loader', options: { sourceMap: true } }
-])
-
-function vueStyleLoader(loader) {
-  if (extractStyles) {
-    return ExtractTextPlugin.extract({
-      fallback: 'vue-style-loader',
-      use: loader
-    })
-  }
-  return ['vue-style-loader'].concat(loader)
-}
+const isProduction = env.NODE_ENV === 'production'
+const extractCSS = !settings.dev_server.hmr
 
 module.exports = {
   test: /\.vue$/,
   loader: 'vue-loader',
   options: {
-    loaders: {
-      js: 'babel-loader',
-      file: 'file-loader',
-      css: vueStyleLoader(cssLoader),
-      scss: vueStyleLoader(scssLoader),
-      sass: vueStyleLoader(sassLoader)
-    }
+    extractCSS: isProduction || extractCSS
   }
 }

lib/install/config/webpack/development.js

@@ -1,5 +1,6 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
+const webpack = require('webpack')
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')
 const { settings, output } = require('./configuration.js')
@@ -15,6 +16,7 @@ module.exports = merge(sharedConfig, {
     clientLogLevel: 'none',
     host: settings.dev_server.host,
     port: settings.dev_server.port,
+    hot: settings.dev_server.hmr,
     contentBase: output.path,
     publicPath: output.publicPath,
     compress: true,
@@ -26,5 +28,10 @@ module.exports = merge(sharedConfig, {
     stats: {
       errorDetails: true
     }
-  }
+  },
+
+  plugins: settings.dev_server.hmr ? [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin()
+  ] : []
 })

lib/install/config/webpacker.yml

@@ -33,6 +33,7 @@ development:
   dev_server:
     host: localhost
     port: 3035
+    hmr: false
 
 test:
   <<: *default

lib/webpacker/dev_server.rb

@@ -12,6 +12,10 @@ def running?
     false
   end
 
+  def hot_module_replacing?
+    fetch(:hmr)
+  end
+
   def host
     fetch(:host)
   end

lib/webpacker/helper.rb

@@ -32,17 +32,26 @@ def javascript_pack_tag(*names, **options)
   # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
   #
+  # Note: If the development server is running and hot module replacement is active, this will return nothing.
+  # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
+  #
   # Examples:
   #
   #   # In development mode:
   #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/calendar.css" data-turbolinks-track="reload" />
   #
+  #   # In development mode with hot module replacement:
+  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
+  #   nil
+  #
   #   # In production mode:
   #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
   def stylesheet_pack_tag(*names, **options)
-    stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)
+    unless Webpacker.dev_server.running? && Webpacker.dev_server.hot_module_replacing?
+      stylesheet_link_tag(*sources_from_pack_manifest(names, type: :stylesheet), **options)
+    end
   end
 
   private