Webpack 3 settings

Author: BookOfGreg

lib/react/server_rendering/webpacker_manifest_container.rb

@@ -64,7 +64,7 @@ def file_path path
         end
       elsif MAJOR == 3
         def file_path path
-          File.join(Webpacker.config.public_output_path, path)
+          ::Rails.root.join('public', manifest.lookup(path)[1..-1])
         end
       else # 1.0 and 1.1 support
         def file_path path

test/dummy_webpacker3/.babelrc

@@ -13,6 +13,7 @@
 
   "plugins": [
     "syntax-dynamic-import",
+    "transform-object-rest-spread",
     ["transform-class-properties", { "spec": true }]
   ]
 }

test/dummy_webpacker3/.gitignore

@@ -1,2 +1,5 @@
 /public/packs
 /node_modules
+/public/packs
+/public/packs-test
+/node_modules

test/dummy_webpacker3/.postcssrc.yml

@@ -1,4 +1,3 @@
 plugins:
   postcss-smart-import: {}
-  precss: {}
-  autoprefixer: {}
+  postcss-cssnext: {}

test/dummy_webpacker3/bin/webpack

@@ -2,7 +2,6 @@
 $stdout.sync = true
 
 require "shellwords"
-require "yaml"
 
 ENV["RAILS_ENV"] ||= "development"
 RAILS_ENV = ENV["RAILS_ENV"]
@@ -20,9 +19,9 @@ unless File.exist?(WEBPACK_CONFIG)
   exit!
 end
 
-newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
-cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmd = [ "#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG ] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec newenv, *cmdline
+  exec env, *cmd
 end

test/dummy_webpacker3/bin/webpack-dev-server

@@ -3,6 +3,7 @@ $stdout.sync = true
 
 require "shellwords"
 require "yaml"
+require "socket"
 
 ENV["RAILS_ENV"] ||= "development"
 RAILS_ENV = ENV["RAILS_ENV"]
@@ -13,31 +14,55 @@ NODE_ENV = ENV["NODE_ENV"]
 APP_PATH          = File.expand_path("../", __dir__)
 CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
 NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
-WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/development.js")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
+
+DEFAULT_LISTEN_HOST_ADDR = NODE_ENV == 'development' ? 'localhost' : '0.0.0.0'
 
 def args(key)
   index = ARGV.index(key)
   index ? ARGV[index + 1] : nil
 end
 
 begin
-  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
+  dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"]
 
-  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
+  HOSTNAME          = args('--host') || dev_server["host"]
+  PORT              = args('--port') || dev_server["port"]
+  HTTPS             = ARGV.include?('--https') || dev_server["https"]
+  DEV_SERVER_ADDR   = "http#{"s" if HTTPS}://#{HOSTNAME}:#{PORT}"
+  LISTEN_HOST_ADDR  = args('--listen-host') || DEFAULT_LISTEN_HOST_ADDR
 
 rescue Errno::ENOENT, NoMethodError
-  puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
-  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
+  $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+begin
+  server = TCPServer.new(LISTEN_HOST_ADDR, PORT)
+  server.close
+
+rescue Errno::EADDRINUSE
+  $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server"
   exit!
 end
 
-newenv = {
-  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
-  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
-}.freeze
+# Delete supplied host, port and listen-host CLI arguments
+["--host", "--port", "--listen-host"].each do |arg|
+  ARGV.delete(args(arg))
+  ARGV.delete(arg)
+end
+
+env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
 
-cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+cmd = [
+  "#{NODE_MODULES_PATH}/.bin/webpack-dev-server", "--progress", "--color",
+  "--config", WEBPACK_CONFIG,
+  "--host", LISTEN_HOST_ADDR,
+  "--public", "#{HOSTNAME}:#{PORT}",
+  "--port", PORT.to_s
+] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec newenv, *cmdline
+  exec env, *cmd
 end

test/dummy_webpacker3/bin/webpack-watcher

@@ -1,32 +1,3 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
+const environment = require('./environment')
 
-const merge = require('webpack-merge')
-const sharedConfig = require('./shared.js')
-const { settings, output } = require('./configuration.js')
-
-module.exports = merge(sharedConfig, {
-  devtool: 'cheap-eval-source-map',
-
-  stats: {
-    errorDetails: true
-  },
-
-  output: {
-    pathinfo: true
-  },
-
-  devServer: {
-    clientLogLevel: 'none',
-    https: settings.dev_server.https,
-    host: settings.dev_server.host,
-    port: settings.dev_server.port,
-    contentBase: output.path,
-    publicPath: output.publicPath,
-    compress: true,
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    historyApiFallback: true,
-    watchOptions: {
-      ignored: /node_modules/
-    }
-  }
-})
+module.exports = environment.toWebpackConfig()