diff --git a/lib/install/config/webpacker.yml b/lib/install/config/webpacker.yml
index 3fc4304d5..c1707a862 100644
--- a/lib/install/config/webpacker.yml
+++ b/lib/install/config/webpacker.yml
@@ -26,7 +26,7 @@ development:
     port: 3035
     public: localhost:3035
     # Hot Module Replacement updates modules while the application is running without a full reload
-    hmr: true
+    hmr: false
     # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
     overlay: true
     # Should we use gzip compression?
diff --git a/lib/webpacker/dev_server.rb b/lib/webpacker/dev_server.rb
index 42927d651..b7fc59614 100644
--- a/lib/webpacker/dev_server.rb
+++ b/lib/webpacker/dev_server.rb
@@ -61,6 +61,8 @@ def env_prefix
 
   private
     def fetch(key)
+      return nil unless config.dev_server.present?
+
       ENV["#{env_prefix}_#{key.upcase}"] || config.dev_server.fetch(key, defaults[key])
     end
 
diff --git a/lib/webpacker/dev_server_runner.rb b/lib/webpacker/dev_server_runner.rb
index 5bb712af1..8cb083f60 100644
--- a/lib/webpacker/dev_server_runner.rb
+++ b/lib/webpacker/dev_server_runner.rb
@@ -74,12 +74,13 @@ def execute_cmd
         end
 
         if @argv.include?("--debug-webpacker")
-          cmd = [ "node", "--inspect-brk"] + cmd
+          cmd = [ "node", "--inspect-brk", "--trace-warnings" ] + cmd
           @argv.delete "--debug-webpacker"
         end
 
         cmd += ["--config", @webpack_config]
         cmd += ["--progress", "--color"] if @pretty
+
         cmd += ["--hot"] if @hot
         cmd += @argv
 
diff --git a/lib/webpacker/helper.rb b/lib/webpacker/helper.rb
index 720bbea18..4a52f9710 100644
--- a/lib/webpacker/helper.rb
+++ b/lib/webpacker/helper.rb
@@ -141,10 +141,10 @@ def preload_pack_asset(name, **options)
   #   <%= stylesheet_pack_tag 'calendar' %>
   #   <%= stylesheet_pack_tag 'map' %>
   def stylesheet_pack_tag(*names, **options)
-    css_extracted = !Webpacker.dev_server.configured_and_running?
-    if css_extracted
-      stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
-    end
+    css_inline = Webpacker.dev_server.hmr? && Webpacker.dev_server.configured_and_running?
+    return "" if css_inline
+
+    stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
   end
 
   private
diff --git a/package/utils/get_style_rule.js b/package/utils/get_style_rule.js
index b64aee9fc..a63934946 100644
--- a/package/utils/get_style_rule.js
+++ b/package/utils/get_style_rule.js
@@ -1,5 +1,6 @@
 /* eslint global-require: 0 */
 
+const devServer = require('../dev_server')
 const { canProcess, moduleExists, runningWebpackDevServer } = require('./helpers')
 
 const getStyleRule = (test, preprocessors = []) => {
@@ -10,9 +11,11 @@ const getStyleRule = (test, preprocessors = []) => {
         options: { sourceMap: true }
       }))
 
+    // style-loader is required when using css modules with HMR on the webpack-dev-server
+    const cssInline = runningWebpackDevServer && devServer.hmr
+
     const use = [
-      // 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,
+      cssInline ? 'style-loader' : require('mini-css-extract-plugin').loader,
       {
         loader: require.resolve('css-loader'),
         options: {