Fixes #21203 - Move from webpack-rails to webpacker

.babelrc

@@ -1,8 +1,31 @@
 {
-  "presets": ["env", "react"],
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": "> 1%",
+          "uglify": true
+        },
+        "useBuiltIns": true
+      }
+    ],
+    "react"
+  ],
   "plugins": [
-    "transform-class-properties",
+    "syntax-dynamic-import",
     "transform-object-rest-spread",
-    "transform-object-assign"
-  ]
+    [
+      "transform-class-properties",
+      {
+        "spec": true
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": ["env", "react"]
+    }
+  }
 }

.gitignore

@@ -47,3 +47,5 @@ public/webpack
 package-lock.json
 npm-debug.log
 .vscode
+/public/packs
+/public/packs-test

.postcssrc.yml

@@ -0,0 +1,3 @@
+plugins:
+  postcss-smart-import: {}
+  postcss-cssnext: {}

.storybook/webpack.config.js

@@ -1,36 +1,5 @@
-let path = require('path');
+const webpackConfig = require('../config/webpack/development');
 
 module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            path.join(__dirname, '..', 'node_modules/babel-preset-react'),
-            path.join(__dirname, '..', 'node_modules/babel-preset-env')
-          ],
-          plugins: [
-            path.join(__dirname, '..', 'node_modules/babel-plugin-transform-class-properties'),
-            path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-rest-spread'),
-            path.join(__dirname, '..', 'node_modules/babel-plugin-transform-object-assign')
-          ]
-        }
-      },
-      {
-        test: /\.css$/,
-        loaders: ['style-loader', 'css-loader']
-      },
-      {
-        test: /(\.png|\.gif)$/,
-        loader: 'url-loader?limit=32767'
-      },
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader']
-      }
-    ]
-  }
+  module: webpackConfig.module,
 };

Gemfile

@@ -46,7 +46,7 @@ gem 'responders', '~> 2.0'
 gem 'roadie-rails', '~> 1.1'
 gem 'x-editable-rails', '~> 1.5.5'
 gem 'deacon', '~> 1.0'
-gem 'webpack-rails', '~> 0.9.8'
+gem 'webpacker', '~> 3.0'
 gem 'mail', '~> 2.7'
 gem 'sshkey', '~> 1.9'
 gem 'ruby2ruby', '2.3.2'

Procfile

@@ -1,5 +1,15 @@
 # Run Rails & Webpack concurrently
-# If you wish to use a different server then the default, use e.g. `export RAILS_STARTUP='puma -w 3 -p 3000 --preload'`
+# If you wish to use a different server then the default, use e.g.
+# `export RAILS_STARTUP='puma -w 3 -p 3000 --preload'`
+# OR
+# RAILS_STARTUP='puma -w 3 -p 3000 --preload' foreman start
 rails: [ -n "$RAILS_STARTUP" ] && env PRY_WARNING=1 $RAILS_STARTUP || [ -n "$BIND" ] && bin/rails server -b $BIND || env PRY_WARNING=1 bin/rails server
-# you can use WEBPACK_OPTS to customize webpack server, e.g. 'WEBPACK_OPTS='--https --key /path/to/key --cert /path/to/cert.pem --cacert /path/to/cacert.pem' foreman start '
-webpack: ./node_modules/.bin/webpack-dev-server --config config/webpack.config.js $WEBPACK_OPTS
+
+# you can use environment variables as options supported by webpack-dev-server
+# in the form WEBPACKER_DEV_SERVER_<OPTION>, e.g.
+# WEBPACKER_DEV_SERVER_HTTPS=true \
+# WEBPACKER_DEV_SERVER_KEY=/path/to/key \
+# WEBPACKER_DEV_SERVER_CERT=/path/to/cert.pem \
+# WEBPACKER_DEV_SERVER_CACERT=/path/to/cacert.pem \
+# foreman start
+webpack: ./bin/webpack-dev-server

app/controllers/application_controller.rb

@@ -19,7 +19,7 @@ class ApplicationController < ActionController::Base
   before_action :set_taxonomy, :require_mail, :check_empty_taxonomy
   before_action :authorize
   before_action :welcome, :only => :index, :unless => :api_request?
-  prepend_before_action :allow_webpack, if: -> { Rails.configuration.webpack.dev_server.enabled }
+  prepend_before_action :allow_webpack, :if => :should_allow_webpack?
   around_action :set_timezone
   layout :display_layout?
   add_flash_types :inline
@@ -399,16 +399,23 @@ def parameter_filter_context
     Foreman::ParameterFilter::Context.new(:ui, controller_name, params[:action])
   end
 
-  def allow_webpack
-    webpack_csp = { script_src: [webpack_server], connect_src: [webpack_server],
-                    style_src: [webpack_server], img_src: [webpack_server] }
+  def should_allow_webpack?
+    Rails.env.development?
+  end
 
+  def allow_webpack
     append_content_security_policy_directives(webpack_csp)
   end
 
-  def webpack_server
-    port = Rails.configuration.webpack.dev_server.port
-    @dev_server ||= "#{request.protocol}#{request.host}:#{port}"
+  def webpack_csp
+    webpack_url = webpack_dev_server_url
+
+    { script_src: [webpack_url], connect_src: [webpack_url],
+      style_src: [webpack_url], img_src: [webpack_url] }
+  end
+
+  def webpack_dev_server_url
+    "#{Webpacker.dev_server.protocol}://#{Webpacker.dev_server.host_with_port}"
   end
 
   class << self

app/helpers/application_helper.rb

@@ -511,11 +511,6 @@ def hosts_count(resource_name = controller.resource_name)
     @hosts_count ||= hosts_scope.authorized.group("#{resource_name}_id").count
   end
 
-  def webpack_dev_server
-    return unless Rails.configuration.webpack.dev_server.enabled
-    javascript_include_tag "#{@dev_server}/webpack-dev-server.js"
-  end
-
   def accessible_resource_records(resource, order = :name)
     klass = resource.to_s.classify.constantize
     klass = klass.with_taxonomy_scope_override(@location, @organization) if klass.include? Taxonomix

app/helpers/reactjs_helper.rb

@@ -28,7 +28,7 @@ def all_webpacked_plugins
   def js_tags_for(requested_plugins)
     requested_plugins.map do |plugin|
       bundle_name = Foreman::Plugin.bundle_name plugin
-      javascript_include_tag(*webpack_asset_paths(bundle_name, :extension => 'js'), "data-turbolinks-track" => true)
+      javascript_pack_tag bundle_name, "data-turbolinks-track": true
     end
   end
 end

app/javascript/packs/application.js

@@ -0,0 +1 @@
+import 'javascripts/bundle';

app/views/layouts/base.html.erb

@@ -9,17 +9,17 @@
     <%= yield(:meta) %>
 
     <%= favicon_link_tag "favicon.ico"%>
-
-    <%= stylesheet_link_tag *webpack_asset_paths('bundle', :extension => 'css'), "data-turbolinks-track" => true %>
-    <%= stylesheet_link_tag 'application', "data-turbolinks-track" => true %>
+    <%= stylesheet_pack_tag 'vendor', "data-turbolinks-track": true %>
+    <%= stylesheet_pack_tag 'application', "data-turbolinks-track": true %>
+    <%= stylesheet_link_tag 'application', "data-turbolinks-track": true %>
     <%= yield(:stylesheets) %>
 
     <%= csrf_meta_tags %>
-    <%= javascript_include_tag *webpack_asset_paths('vendor', :extension => 'js'), "data-turbolinks-track" => true %>
-    <%= javascript_include_tag *webpack_asset_paths('bundle', :extension => 'js'), "data-turbolinks-track" => true %>
-    <%= javascript_include_tag "locale/#{FastGettext.locale}/app", "data-turbolinks-track" => true %>
-    <%= javascript_include_tag 'application', "data-turbolinks-track" => true %>
-    <%= webpack_dev_server %>
+    <%= javascript_pack_tag 'manifest', "data-turbolinks-track": true %>
+    <%= javascript_pack_tag 'vendor', "data-turbolinks-track": true %>
+    <%= javascript_pack_tag 'application', "data-turbolinks-track": true %>
+    <%= javascript_include_tag "locale/#{FastGettext.locale}/app", "data-turbolinks-track": true %>
+    <%= javascript_include_tag 'application', "data-turbolinks-track": true %>
     <%= yield(:javascripts) %>
 
     <script type="text/javascript">

bin/webpack

@@ -0,0 +1,17 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+#
+# This file was generated by Bundler.
+#
+# The application 'webpack' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("webpacker", "webpack")

bin/webpack-dev-server

@@ -0,0 +1,17 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+#
+# This file was generated by Bundler.
+#
+# The application 'webpack-dev-server' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("webpacker", "webpack-dev-server")

config/environments/development.rb

@@ -51,8 +51,4 @@
     Bullet.add_whitelist :type => :n_plus_one_query, :class_name => "Puppetclass", :association => :environments
     Bullet.add_whitelist :type => :n_plus_one_query, :class_name => "Puppetclass", :association => :class_params
   end if defined?(Bullet)
-
-  #Allow disabling the webpack dev server from the settings
-  config.webpack.dev_server.enabled = SETTINGS.fetch(:webpack_dev_server, true)
-  config.webpack.dev_server.https = SETTINGS.fetch(:webpack_dev_server_https, false)
 end

config/environments/production.rb

@@ -79,8 +79,6 @@
   # Do not dump schema after migrations.
   config.active_record.dump_schema_after_migration = false
 
-  config.webpack.dev_server.enabled = false
-
   # Log denied attributes into logger
   config.action_controller.action_on_unpermitted_parameters = :log
 end

config/environments/test.rb

@@ -66,8 +66,6 @@
   # Randomize the order test cases are executed.
   config.active_support.test_order = :random
 
-  config.webpack.dev_server.enabled = false
-
   # Whitelist all plugin engines by default from raising errors on deprecation warnings for
   # compatibility, allow them to override it by adding an ASDT configuration file.
   config.after_initialize do

config/settings.yaml.example

@@ -17,15 +17,6 @@
 # Mark translated strings with X characters (for developers)
 :mark_translated: false
 
-# Use the webpack development server? set to false to disable (for developers)
-# Make sure to run `rake webpack:compile` if disabled.
-:webpack_dev_server: true
-
-# If you run Foreman in development behind some proxy or use HTTPS you need
-# to enable HTTPS for webpack dev server too, otherwise you'd get mixed content
-# errors in your browser
-:webpack_dev_server_https: false
-
 # Ruby on Rails version (available: 4.2, 5.0)
 # Defaults to 4.2 on Ruby 2.0-2.2, or 5.0 on Ruby 2.3+
 #:rails: 4.2