Replaced webpacker -> jsbundling-rails

.gitignore

@@ -31,6 +31,9 @@ config/database.yml
 
 /public/system/*
 /public/assets
+/app/assets/builds/*
+!/app/assets/builds/.keep
+# webpacker
 /public/packs
 /public/packs-test
 

Gemfile

@@ -11,7 +11,7 @@ gem 'slim-rails'
 gem 'jbuilder'
 
 gem "sprockets-rails"
-gem 'webpacker', '~> 5.0'
+gem 'jsbundling-rails'
 
 gem 'rack-cors'
 
@@ -52,6 +52,7 @@ group :development do
   gem 'spring'
   gem 'awesome_print'
   gem 'rails-erd'
+  gem 'foreman'
 end
 
 group :development, :test do

Gemfile.lock

@@ -106,6 +106,7 @@ GEM
       factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
     ffi (1.15.5)
+    foreman (0.87.2)
     globalid (1.0.0)
       activesupport (>= 5.0)
     i18n (1.10.0)
@@ -116,6 +117,8 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsbundling-rails (1.0.3)
+      railties (>= 6.0.0)
     json_schema (0.21.0)
     loofah (2.18.0)
       crass (~> 1.0.2)
@@ -158,8 +161,6 @@ GEM
       rack (>= 2.0.0)
     rack-mini-profiler (3.0.0)
       rack (>= 1.2.0)
-    rack-proxy (0.7.2)
-      rack
     rack-test (2.0.2)
       rack (>= 1.3)
     rails (7.0.3)
@@ -235,7 +236,6 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
-    semantic_range (3.0.0)
     slim (4.1.0)
       temple (>= 0.7.6, < 0.9)
       tilt (>= 2.0.6, < 2.1)
@@ -262,11 +262,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (~> 4.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket (1.2.9)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
@@ -285,7 +280,9 @@ DEPENDENCIES
   committee-rails
   debug
   factory_bot_rails
+  foreman
   jbuilder
+  jsbundling-rails
   mysql2 (~> 0.5)
   puma (~> 5.6)
   rack-cors
@@ -301,7 +298,6 @@ DEPENDENCIES
   sprockets-rails
   tzinfo-data
   webdrivers
-  webpacker (~> 5.0)
 
 RUBY VERSION
    ruby 3.1.2p20

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+js: yarn build --watch

app/assets/config/manifest.js

@@ -1 +1,2 @@
 //= link_tree ../images
+//= link_tree ../builds

app/frontend/javascripts/common.js

@@ -10,9 +10,6 @@ import Rails from "@rails/ujs"
 Rails.start()
 //ActiveStorage.start()
 
-import "core-js/stable"
-import "regenerator-runtime/runtime"
-
 // lib
 import "bootstrap"
 
@@ -21,4 +18,4 @@ import '@fortawesome/fontawesome-free/js/solid'
 import '@fortawesome/fontawesome-free/js/regular'
 
 // special entry point of application.css
-import "@css/application"
+//import "@css/application"

app/views/layouts/application.html.slim

@@ -7,8 +7,8 @@ html
     = csrf_meta_tags
     = csp_meta_tag
 
-    = stylesheet_packs_with_chunks_tag 'application'
-    = javascript_packs_with_chunks_tag yield(:js_entrypoint).blank? ? 'application' : yield(:js_entrypoint)
+    = stylesheet_link_tag 'application'
+    = javascript_include_tag yield(:js_entrypoint).blank? ? 'application' : yield(:js_entrypoint)
     = content_for :header
 
   body

babel.config.js

@@ -1,82 +1 @@
-module.exports = function(api) {
-  var validEnv = ['development', 'test', 'production']
-  var currentEnv = api.env()
-  var isDevelopmentEnv = api.env('development')
-  var isProductionEnv = api.env('production')
-  var isTestEnv = api.env('test')
-
-  if (!validEnv.includes(currentEnv)) {
-    throw new Error(
-      'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        '.'
-    )
-  }
-
-  return {
-    presets: [
-      isTestEnv && [
-        '@babel/preset-env',
-        {
-          targets: {
-            node: 'current'
-          }
-        }
-      ],
-      (isProductionEnv || isDevelopmentEnv) && [
-        '@babel/preset-env',
-        {
-          forceAllTransforms: true,
-          useBuiltIns: 'entry',
-          corejs: 3,
-          modules: false,
-          exclude: ['transform-typeof-symbol']
-        }
-      ]
-    ].filter(Boolean),
-    plugins: [
-      'babel-plugin-macros',
-      '@babel/plugin-syntax-dynamic-import',
-      isTestEnv && 'babel-plugin-dynamic-import-node',
-      '@babel/plugin-transform-destructuring',
-      [
-        '@babel/plugin-proposal-class-properties',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-object-rest-spread',
-        {
-          useBuiltIns: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-private-methods',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-proposal-private-property-in-object',
-        {
-          loose: true
-        }
-      ],
-      [
-        '@babel/plugin-transform-runtime',
-        {
-          helpers: false
-        }
-      ],
-      [
-        '@babel/plugin-transform-regenerator',
-        {
-          async: false
-        }
-      ]
-    ].filter(Boolean)
-  }
-}
+presets: ["@babel/preset-env"]

bin/dev

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+if ! foreman version &> /dev/null
+then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+foreman start -f Procfile.dev "$@"

config/initializers/assets.rb

@@ -5,8 +5,6 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-# Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join('node_modules')
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

config/webpack/webpack.config.js

@@ -0,0 +1,66 @@
+const path    = require("path")
+const webpack = require("webpack")
+
+// CSS/SASS
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+
+// mode
+const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
+
+module.exports = {
+  mode,
+  devtool: "source-map",
+  entry: {
+    application: [
+      "./app/frontend/packs/application.js",
+      "./app/frontend/stylesheets/application.scss",
+    ]
+  },
+  output: {
+    filename: "[name].js",
+    sourceMapFilename: "[file].map",
+    path: path.resolve(__dirname, "..", "..", "app/assets/builds"),
+  },
+  plugins: [
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery'
+    }),
+    // CSS/SASS
+    new RemoveEmptyScriptsPlugin(),
+    new MiniCssExtractPlugin(),
+  ],
+  module: {
+    rules: [
+      // babel
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      },
+      // Add CSS/SASS/SCSS rule with loaders
+      {
+        test: /\.(?:sa|sc|c)ss$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  resolve: {
+    // Add additional file types
+    extensions: ['.js', '.jsx', '.scss', '.css'],
+    alias: {
+      '@js': path.resolve(__dirname, '..', '..', 'app/frontend', 'javascripts'),
+      '@components': path.resolve(__dirname, '..', '..', 'app/frontend', 'javascripts', 'components'),
+      '@css': path.resolve(__dirname, '..', '..', 'app/frontend', 'stylesheets')
+    }
+  }
+}