CSS Modules HMR working again

1. Use style-loader for CSS modules HMR
2. Don't extract CSS if running the webpack-dev-server

docs/developing_webpacker.md

@@ -0,0 +1,31 @@
+# Developing Webpacker
+
+It's a little trickier for Rails developers to work on the JS code of a project like rails/webpacker. So here are some tips!
+
+
+                                                    
+## Use some test app
+For example, for React on Rails Changes, I'm using [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
+This directory is the `TEST_APP_DIR`.
+
+## Fork rails/webpacker
+Let's call the rails/webpacker directory `WEBPACKER_DIR` which has rails/webpacker's `package.json`.
+
+## Changing the Package
+### Setup with Yalc
+Use [`yalc`](https://github.com/wclr/yalc) unless you like yak shaving weird errors. 
+1. In `WEBPACKER_DIR`, run `yalc publish` 
+2. In `TEST_APP_DIR`, run `yarn link @rails/webpacker`
+
+## Update the Package Code
+1. Make some JS change in WEBPACKER_DIR
+2. Run `yalc push` and your changes will to your `TEST_APP_DIR`'s node_modules.
+3. You may need to run `yarn` in `TEST_APP_DIR` if you added or removed dependencies of rails/webpacker.
+
+## Updating the Ruby Code
+
+For the Ruby part, just change the gem reference `TEST_APP_DIR`, like:
+
+```ruby
+gem "webpacker", path: "../../forks/webpacker"
+```

lib/install/config/webpacker.yml

@@ -25,8 +25,6 @@ development:
     host: localhost
     port: 3035
     public: localhost:3035
-    # Inject browserside javascript that is required by both HMR and Live (full) reload
-    inject_client: true
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
     # Inline should be set to true if using HMR; it inserts a script to take care of live reloading

lib/webpacker/helper.rb

@@ -137,7 +137,9 @@ def preload_pack_asset(name, **options)
   #   <%= stylesheet_pack_tag 'calendar' %>
   #   <%= stylesheet_pack_tag 'map' %>
   def stylesheet_pack_tag(*names, **options)
-    stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
+    unless current_webpacker_instance.dev_server.running?
+      stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
+    end
   end
 
   private

package/environments/development.js

@@ -3,6 +3,7 @@ const webpack = require('webpack')
 
 const baseConfig = require('./base')
 const devServer = require('../dev_server')
+const { runningWebpackDevServer } = require('../utils/helpers')
 
 const { outputPath: contentBase, publicPath } = require('../config')
 
@@ -11,10 +12,7 @@ let devConfig = {
   devtool: 'cheap-module-source-map'
 }
 
-if (
-  process.env.WEBPACK_DEV_SERVER &&
-  process.env.WEBPACK_DEV_SERVER !== 'undefined'
-) {
+if (runningWebpackDevServer) {
   if (devServer.hmr) {
     devConfig = merge(devConfig, {
       output: { filename: '[name]-[hash].js' },
@@ -34,7 +32,8 @@ if (
       hot: devServer.hmr,
       contentBase,
       inline: devServer.inline,
-      injectClient: devServer.inject_client,
+      injectClient: !devServer.hmr,
+      injectHot: devServer.hmr,
       useLocalIp: devServer.use_local_ip,
       public: devServer.public,
       publicPath,

package/utils/get_style_rule.js

@@ -1,6 +1,6 @@
 /* eslint global-require: 0 */
 
-const { canProcess, moduleExists } = require('./helpers')
+const { canProcess, moduleExists, runningWebpackDevServer } = require('./helpers')
 
 const getStyleRule = (test, preprocessors = []) => {
   if (moduleExists('css-loader')) {
@@ -11,7 +11,8 @@ const getStyleRule = (test, preprocessors = []) => {
       }))
 
     const use = [
-      { loader: require('mini-css-extract-plugin').loader },
+      // style-loader is required when using css modules with HMR, so just always use for the dev-server
+      runningWebpackDevServer ? 'style-loader' : require('mini-css-extract-plugin').loader,
       {
         loader: require.resolve('css-loader'),
         options: {

package/utils/helpers.js

@@ -39,6 +39,9 @@ const canProcess = (rule, fn) => {
   return null
 }
 
+const runningWebpackDevServer = process.env.WEBPACK_DEV_SERVER &&
+  process.env.WEBPACK_DEV_SERVER !== 'undefined'
+
 module.exports = {
   chdirTestApp,
   chdirCwd,
@@ -47,5 +50,6 @@ module.exports = {
   ensureTrailingSlash,
   canProcess,
   moduleExists,
-  resetEnv
+  resetEnv,
+  runningWebpackDevServer
 }