Reinitialize webpacker with default config except for the following diff in configuration.js

-  `http://${devServer.host}:${devServer.port}/` : `/${paths.entry}/`
+  `http://${devServer.host}:${devServer.port}/${paths.entry}/` : `/${paths.entry}/`

Author: BookOfGreg

test/dummy_webpacker1/.gitignore

@@ -5,28 +5,36 @@ require "shellwords"
 require "yaml"
 
 ENV["RAILS_ENV"] ||= "development"
-RAILS_ENV = ENV["RAILS_ENV"]
+RAILS_ENV   = ENV["RAILS_ENV"]
 
 ENV["NODE_ENV"] ||= RAILS_ENV
-NODE_ENV = ENV["NODE_ENV"]
+NODE_ENV    = ENV["NODE_ENV"]
 
-APP_PATH = File.expand_path("../", __dir__)
+APP_PATH               = File.expand_path("../", __dir__)
+CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")
+DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
 
-def load_yaml_config(config_file)
-  YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
+begin
+  paths            = YAML.load(File.read(CONFIG_PATH))
+  dev_server = YAML.load(File.read(DEV_SERVER_CONFIG_PATH))
+
+  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
+  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+
+  if NODE_ENV == "development" && dev_server["enabled"]
+    puts "Warning: webpack-dev-server is currently enabled in #{DEV_SERVER_CONFIG_PATH}. " \
+      "Disable to serve assets directly from public/packs directory"
+  end
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in #{config_file}."
+  puts "Configuration not found in config/webpack/paths.yml or config/webpack/development.server.yml."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-paths = load_yaml_config("config/webpack/paths.yml")
-NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
-WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "#{NODE_ENV}.js")
-
-newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
-cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+WEBPACK_BIN    = "#{NODE_MODULES_PATH}/.bin/webpack"
+WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
 
 Dir.chdir(APP_PATH) do
-  exec newenv, *cmdline
+  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
+    " #{ARGV.join(" ")}"
 end

test/dummy_webpacker1/bin/webpack

@@ -10,26 +10,24 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH = File.expand_path("../", __dir__)
+APP_PATH    = File.expand_path("../", __dir__)
+CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
 
-def load_yaml_config(config_file)
-  YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
+begin
+  paths = YAML.load(File.read(CONFIG_PATH))
+
+  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
+  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+
+  WEBPACK_BIN       = "#{NODE_MODULES_PATH}/.bin/webpack-dev-server"
+  DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in #{config_file}."
+  puts "Configuration not found in config/webpacker/paths.yml."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-paths = load_yaml_config("config/webpack/paths.yml")
-NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
-WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "development.server.js")
-
-dev_server = load_yaml_config("config/webpack/development.server.yml")
-DEV_SERVER_HOST = "http#{"s" if dev_server["https"]}://#{dev_server["host"]}:#{dev_server["port"]}"
-
-newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape, "ASSET_HOST" => DEV_SERVER_HOST.shellescape }
-cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
-
 Dir.chdir(APP_PATH) do
-  exec newenv, *cmdline
+  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
+    "--config #{DEV_SERVER_CONFIG}"
 end

test/dummy_webpacker1/bin/webpack-dev-server

@@ -5,11 +5,6 @@
 require "action_controller/railtie"
 require "action_mailer/railtie"
 
-# Test no-sprockets environment by testing the gemfile name
-if SprocketsHelpers.available?
-  require "sprockets/railtie"
-end
-
 require "rails/test_unit/railtie"
 
 # Make sure gems in development group are required, for example, react-rails and turbolinks.
@@ -35,9 +30,5 @@ class Application < Rails::Application
     config.react.server_renderer_options = {
       replay_console: true,
     }
-
-    if SprocketsHelpers.available?
-      config.assets.enabled = true
-    end
   end
 end

test/dummy_webpacker1/config/application.rb

@@ -18,9 +18,4 @@
 
   # Print deprecation notices to the Rails logger.
   config.active_support.deprecation = :log
-
-  # Debug mode disables concatenation and preprocessing of assets.
-  # This option may cause significant delays in view rendering with a large
-  # number of complex assets.
-  config.assets.debug = true
 end

test/dummy_webpacker1/config/environments/development.rb

@@ -9,9 +9,6 @@
   # we need this to reload the jsx transformer when different version is dropped in
   config.cache_classes = false
   config.reload_plugins = true
-  if SprocketsHelpers.available?
-    config.assets.cache_store = :null_store
-  end
 
   # Do not eager load code on boot. This avoids loading your whole application
   # just for the purpose of running a single test. If you are using a tool that

test/dummy_webpacker1/config/environments/test.rb

@@ -7,31 +7,15 @@ const { readFileSync } = require('fs')
 
 const configPath = resolve('config', 'webpack')
 const loadersDir = join(__dirname, 'loaders')
-const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
-const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
-
-function removeOuterSlashes(string) {
-  return string.replace(/^\/*/, '').replace(/\/*$/, '')
-}
-
-function formatPublicPath(host = '', path = '') {
-  let formattedHost = removeOuterSlashes(host)
-  if (formattedHost && !/^http/i.test(formattedHost)) {
-    formattedHost = `//${formattedHost}`
-  }
-  const formattedPath = removeOuterSlashes(path)
-  return `${formattedHost}/${formattedPath}/`
-}
-
-const output = {
-  path: resolve('public', paths.output),
-  publicPath: formatPublicPath(env.ASSET_HOST, paths.output)
-}
+const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))
+const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))
+const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
+  `http://${devServer.host}:${devServer.port}/${paths.entry}/` : `/${paths.entry}/`
 
 module.exports = {
   devServer,
   env,
   paths,
   loadersDir,
-  output
+  publicPath
 }

test/dummy_webpacker1/config/webpack/configuration.js

@@ -1,20 +1,16 @@
-try {
-  const environment = require('./environment')
+// Note: You must restart bin/webpack-watcher for changes to take effect
 
-  module.exports = environment.toWebpackConfig()
-} catch (e) {
-  const merge = require('webpack-merge')
-  const sharedConfig = require('./shared.js')
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
 
-  module.exports = merge(sharedConfig, {
-    devtool: 'sourcemap',
+module.exports = merge(sharedConfig, {
+  devtool: 'sourcemap',
 
-    stats: {
-      errorDetails: true
-    },
+  stats: {
+    errorDetails: true
+  },
 
-    output: {
-      pathinfo: true
-    }
-  })
-}
+  output: {
+    pathinfo: true
+  }
+})

test/dummy_webpacker1/config/webpack/development.js

@@ -1,17 +1,17 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
+const { resolve } = require('path')
 const merge = require('webpack-merge')
 const devConfig = require('./development.js')
-const { devServer, output } = require('./configuration.js')
+const { devServer, publicPath, paths } = require('./configuration.js')
 
 module.exports = merge(devConfig, {
   devServer: {
     host: devServer.host,
     port: devServer.port,
-    contentBase: output.path,
-    publicPath: output.publicPath,
     compress: true,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    historyApiFallback: true
+    historyApiFallback: true,
+    contentBase: resolve(paths.output, paths.entry),
+    publicPath
   }
 })

test/dummy_webpacker1/config/webpack/development.server.js

@@ -1,17 +1,4 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  enabled: true
-  host: localhost
-  port: 8080
-
-development:
-  <<: *default
-
-test:
-  <<: *default
-  enabled: false
-
-production:
-  <<: *default
-  enabled: false
+# Restart webpack-dev-server if you make changes here
+enabled: true
+host: localhost
+port: 8080