Update shakapacker (#493)

gscarv13 · web-flow · commit c91332fc3247 · 2022-01-31T22:50:56.000-10:00
* Add and install shakapacker
* Update Babel and Webpack config to use Shakapacker
* Update Procfile commands
* Update bin/webpack occurences into bin/webpacker
diff --git a/.ruby-version b/.ruby-version
@@ -1 +1 @@
-ruby-2.7.1
+2.7.5
diff --git a/Gemfile b/Gemfile
@@ -3,10 +3,10 @@
 source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby "2.7.3"
+ruby "2.7.5"
 
 gem "react_on_rails", "12.5.2"
-gem "webpacker", "6.0.0.rc.6"
+gem "shakapacker", "6.0.2"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
 gem "listen"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -299,6 +299,11 @@ GEM
       rubyzip (>= 1.2.2)
     semantic_range (3.0.0)
     sexp_processor (4.16.0)
+    shakapacker (6.0.2)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     simplecov (0.16.1)
       docile (~> 1.1)
       json (>= 1.8, < 3)
@@ -392,15 +397,15 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver
+  shakapacker (= 6.0.2)
   spring
   spring-commands-rspec
   uglifier
   web-console
   webdrivers (= 3.9.4)
-  webpacker (= 6.0.0.rc.6)
 
 RUBY VERSION
-   ruby 2.7.3p183
+   ruby 2.7.5p203
 
 BUNDLED WITH
    2.1.4
diff --git a/Procfile.dev b/Procfile.dev
@@ -2,5 +2,5 @@
 # You can run these commands in separate shells
 redis: redis-server
 rails: bundle exec rails s -p 3000
-wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/webpack-dev-server
-wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/webpack --watch
+wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/webpacker-dev-server
+wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/webpacker --watch
diff --git a/Procfile.dev-static b/Procfile.dev-static
@@ -6,5 +6,5 @@ redis: redis-server
 # When making frequent changes to client side assets, you will prefer building webpack assets
 # upon saving rather than when you refresh your browser page.
 # Note, if using React on Rails localization you will need to run
-# `bundle exec rake react_on_rails:locale` before you run bin/webpack
-webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/webpack -w'
+# `bundle exec rake react_on_rails:locale` before you run bin/webpacker
+webpack: sh -c 'bundle exec rake react_on_rails:locale && rm -rf public/packs/* || true && bin/webpacker -w'
diff --git a/babel.config.js b/babel.config.js
@@ -1,16 +1,30 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js
-
-const defaultConfigFunc = require('@rails/webpacker/package/babel/preset.js');
-
 module.exports = function (api) {
-  const resultConfig = defaultConfigFunc(api);
+  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isProductionEnv = api.env('production')
 
   const changesOnDefault = {
-    plugins: [process.env.WEBPACK_SERVE && 'react-refresh/babel'].filter(Boolean),
-  };
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: !isProductionEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean),
+  }
 
-  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins];
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
 
-  return resultConfig;
-};
+  return resultConfig
+}
diff --git a/bin/webpacker b/bin/webpacker
@@ -6,7 +6,7 @@ require "webpacker"
 require "webpacker/webpack_runner"
 
 ENV["RAILS_ENV"] ||= "development"
-ENV["NODE_ENV"]  ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
 
 APP_ROOT = File.expand_path("..", __dir__)
diff --git a/bin/webpacker-dev-server b/bin/webpacker-dev-server
@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
 ENV["RAILS_ENV"] ||= "development"
-ENV["NODE_ENV"]  ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
diff --git a/config/webpack/DEBUGGING.md b/config/webpack/DEBUGGING.md
@@ -3,7 +3,7 @@
 # https://github.com/rails/webpacker/pull/2018
 
 To debug:
-bin/webpack --debug
+bin/webpacker --debug-webpakcer
 
 And put a debugger statement in the file you're editing.
 
diff --git a/config/webpack/commonWebpackConfig.js b/config/webpack/commonWebpackConfig.js
@@ -2,7 +2,7 @@
 // https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js
 
 // Common configuration applying to client and server configuration
-const { webpackConfig: baseClientWebpackConfig, merge } = require('@rails/webpacker');
+const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');
 
 const commonOptions = {
   resolve: {
diff --git a/config/webpack/development.js b/config/webpack/development.js
@@ -3,7 +3,7 @@
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-const { devServer, inliningCss } = require('@rails/webpacker');
+const { devServer, inliningCss } = require('shakapacker');
 
 const webpackConfig = require('./webpackConfig');
 
diff --git a/config/webpack/serverWebpackConfig.js b/config/webpack/serverWebpackConfig.js
@@ -1,7 +1,7 @@
 // The source code including full typescript support is available at: 
 // https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js
 
-const { merge, config } = require('@rails/webpacker');
+const { config } = require('shakapacker');
 const commonWebpackConfig = require('./commonWebpackConfig');
 
 const webpack = require('webpack');
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
@@ -0,0 +1,15 @@
+const { env, webpackConfig } = require('shakapacker')
+const { existsSync } = require('fs')
+const { resolve } = require('path')
+
+const envSpecificConfig = () => {
+  const path = resolve(__dirname, `${env.nodeEnv}.js`)
+  if (existsSync(path)) {
+    console.log(`Loading ENV specific webpack configuration file ${path}`)
+    return require(path)
+  } else {
+    return webpackConfig
+  }
+}
+
+module.exports = envSpecificConfig()
diff --git a/config/webpacker.yml b/config/webpacker.yml
@@ -1,4 +1,4 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
+# Note: You must restart bin/webpacker-dev-server for changes to take effect
 
 default: &default
   source_path: client/app
@@ -17,7 +17,7 @@ default: &default
 
 development:
   <<: *default
-  # This is false since we're running `bin/webpack -w` in Procfile.dev-setic
+  # This is false since we're running `bin/webpacker -w` in Procfile.dev-setic
   compile: false
 
   # Reference: https://webpack.js.org/configuration/dev-server/
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "version": "1.1.0",
   "description": "Code from the React Webpack tutorial.",
   "engines": {
-    "node": "12",
-    "yarn": "^1.0.0"
+    "node": "16.13.2",
+    "yarn": "1.22.17"
   },
   "repository": {
     "type": "git",
@@ -20,21 +20,26 @@
     "lint": "yarn run eslint client --ext \".js,.jsx,.ts\"",
     "test": "yarn run build:test && yarn run lint",
     "test:client": "cd client && yarn run test",
-    "build:test": "rm -rf public/webpack/test && RAILS_ENV=test NODE_ENV=test bin/webpack",
-    "build:dev": "rm -rf public/webpack/development && RAILS_ENV=development NODE_ENV=development bin/webpack",
+    "build:test": "rm -rf public/webpack/test && RAILS_ENV=test NODE_ENV=test bin/webpacker",
+    "build:dev": "rm -rf public/webpack/development && RAILS_ENV=development NODE_ENV=development bin/webpacker",
     "build:clean": "rm -rf public/webpack || true"
   },
   "dependencies": {
+    "@babel/core": "7",
+    "@babel/plugin-transform-runtime": "7",
+    "@babel/preset-env": "7",
     "@babel/preset-react": "^7.16.7",
+    "@babel/runtime": "7",
     "@rails/actioncable": "6.1.4-4",
-    "@rails/webpacker": "^6.0.0-rc.6",
     "autoprefixer": "^7.1.5",
     "axios": "^0.17.1",
+    "babel-loader": "8",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "bootstrap-loader": "judahmeek/bootstrap-loader#judahmeek/webpack-5",
     "bootstrap-sass": "^3.3.7",
     "classnames": "^2.2.5",
+    "compression-webpack-plugin": "9",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.3.1",
     "es5-shim": "^4.5.9",
@@ -68,11 +73,15 @@
     "sass": "^1.46.0",
     "sass-loader": "^12.4.0",
     "sass-resources-loader": "^2.2.4",
+    "shakapacker": "6.0.2",
     "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "5",
     "turbolinks": "^5.2.0",
     "url-loader": "^0.6.2",
-    "webpack": "^5.53.0",
-    "webpack-cli": "^4.8.0"
+    "webpack": "5",
+    "webpack-assets-manifest": "5",
+    "webpack-cli": "4",
+    "webpack-merge": "5"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
@@ -99,7 +108,7 @@
     "react-transform-hmr": "^1.0.4",
     "regenerator-runtime": "^0.12.1",
     "sleep": "^6.2.0",
-    "webpack-dev-server": "^4.7.2"
+    "webpack-dev-server": "^4.7.3"
   },
   "browser": {
     "fs": false
diff --git a/yarn.lock b/yarn.lock
