Regenerate webpacker configs for webpacker 2

Author: BookOfGreg

lib/react/server_rendering/webpacker_manifest_container.rb

@@ -1,5 +1,5 @@
 require "open-uri"
-require 'pry'
+# require 'pry'
 
 module React
   module ServerRendering

test/dummy_webpacker2/.babelrc

@@ -1,16 +1,17 @@
 {
   "presets": [
-    [
-      "env",
-      {
-        "modules": false,
-        "targets": {
-          "browsers": "> 1%",
-          "uglify": true
-        },
-        "useBuiltIns": true
-      }
-    ],
-    "react"
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }]
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    ["transform-class-properties", { "spec": true }]
   ]
 }

test/dummy_webpacker2/.gitignore

@@ -0,0 +1,2 @@
+/public/packs
+/node_modules

test/dummy_webpacker2/bin/webpack

@@ -5,36 +5,24 @@ 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__)
-CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")
-DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
+APP_PATH          = File.expand_path("../", __dir__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
 
-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/webpack/paths.yml or config/webpack/development.server.yml."
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-WEBPACK_BIN    = "#{NODE_MODULES_PATH}/.bin/webpack"
-WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
 
 Dir.chdir(APP_PATH) do
-  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --config #{WEBPACK_CONFIG}" \
-    " #{ARGV.join(" ")}"
+  exec newenv, *cmdline
 end

test/dummy_webpacker2/bin/webpack-dev-server

@@ -10,24 +10,34 @@ 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__)
+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")
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
 
 begin
-  paths = YAML.load(File.read(CONFIG_PATH))
+  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
 
-  NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
-  WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
+  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
 
-  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/webpacker/paths.yml."
+  puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
+newenv = {
+  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
+  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
+}.freeze
+
+cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+
 Dir.chdir(APP_PATH) do
-  exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
-    "--config #{DEV_SERVER_CONFIG}"
+  exec newenv, *cmdline
 end

test/dummy_webpacker2/config/webpack/configuration.js

@@ -1,21 +1,35 @@
-// Common configuration for webpacker loaded from config/webpack/paths.yml
+// Common configuration for webpacker loaded from config/webpacker.yml
 
 const { join, resolve } = require('path')
 const { env } = require('process')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 
-const configPath = resolve('config', 'webpack')
+const configPath = resolve('config', 'webpacker.yml')
 const loadersDir = join(__dirname, 'loaders')
-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}/`
+const settings = safeLoad(readFileSync(configPath), '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', settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
+}
 
 module.exports = {
-  devServer,
+  settings,
   env,
-  paths,
   loadersDir,
-  publicPath
+  output
 }

test/dummy_webpacker2/config/webpack/development.js

@@ -1,16 +1,32 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server for changes to take effect
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')
+const { settings, output } = require('./configuration.js')
 
 module.exports = merge(sharedConfig, {
-  devtool: 'sourcemap',
+  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/
+    }
   }
 })

test/dummy_webpacker2/config/webpack/loaders/assets.js

@@ -1,7 +1,7 @@
 const { env, publicPath } = require('../configuration.js')
 
 module.exports = {
-  test: /\.(jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
   use: [{
     loader: 'file-loader',
     options: {

test/dummy_webpacker2/config/webpack/loaders/babel.js

@@ -1,10 +1,5 @@
 module.exports = {
   test: /\.js(\.erb)?$/,
   exclude: /node_modules/,
-  loader: 'babel-loader',
-  options: {
-    presets: [
-      ['env', { modules: false }]
-    ]
-  }
+  loader: 'babel-loader'
 }

test/dummy_webpacker2/config/webpack/loaders/erb.js

@@ -4,6 +4,6 @@ module.exports = {
   exclude: /node_modules/,
   loader: 'rails-erb-loader',
   options: {
-    runner: 'DISABLE_SPRING=1 bin/rails runner'
+    runner: 'bin/rails runner'
   }
 }