Construct dev server asset host in bin/webpack-dev-server

Author: javan

lib/install/bin/webpack-dev-server.tt

@@ -10,26 +10,26 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH    = File.expand_path("../", __dir__)
-CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
+APP_PATH = File.expand_path("../", __dir__)
 
-begin
-  paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
-
-  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
-  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
-
-  DEV_SERVER_CONFIG = "#{WEBPACK_CONFIG_PATH}/development.server.js"
+def load_yaml_config(config_file)
+  YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in config/webpacker/paths.yml."
+  puts "Configuration not found in #{config_file}."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-DEV_SERVER_BIN       = "yarn run webpack-dev-server"
-newenv = { "NODE_PATH" => NODE_MODULES_PATH }
-cmdline = [DEV_SERVER_BIN, "--", "--progress", "--color", "--config", DEV_SERVER_CONFIG] + ARGV
+paths = load_yaml_config("config/webpack/paths.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
+DEV_SERVER_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", DEV_SERVER_CONFIG] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec newenv, cmdline.join(' ')
+  exec newenv, *cmdline
 end

lib/install/config/webpack/configuration.js

@@ -33,6 +33,5 @@ module.exports = {
   env,
   paths,
   loadersDir,
-  output,
-  formatPublicPath
+  output
 }

lib/install/config/webpack/development.server.js

@@ -1,33 +1,18 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
 const merge = require('webpack-merge')
-const ManifestPlugin = require('webpack-manifest-plugin')
 const devConfig = require('./development.js')
-const { devServer, paths, output, formatPublicPath } = require('./configuration.js')
-
-const { host, port } = devServer
-const contentBase = output.path
-const publicPath = formatPublicPath(`http://${host}:${port}`, paths.output)
-
-// Remove ManifestPlugin so we can replace it with a new one
-devConfig.plugins = devConfig.plugins.filter(plugin => plugin.constructor.name !== 'ManifestPlugin')
+const { devServer, output } = require('./configuration.js')
 
 module.exports = merge(devConfig, {
-  output: {
-    publicPath
-  },
-
   devServer: {
-    host,
-    port,
-    contentBase,
-    publicPath,
+    host: devServer.host,
+    port: devServer.port,
+    contentBase: output.path,
+    publicPath: output.publicPath,
+    inline: false,
     compress: true,
     headers: { 'Access-Control-Allow-Origin': '*' },
     historyApiFallback: true
-  },
-
-  plugins: [
-    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })
-  ]
+  }
 })