[JS] Because I was forced to upgrade webpack and redo everything from scratch

This is probably going to be partially broken somehow. Let's find out.

.gitignore

@@ -37,3 +37,10 @@ test/reports
 /node_modules
 yarn-debug.log*
 .yarn-integrity
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

babel.config.js

@@ -41,19 +41,10 @@ module.exports = function(api) {
       require('@babel/plugin-syntax-dynamic-import').default,
       isTestEnv && require('babel-plugin-dynamic-import-node'),
       require('@babel/plugin-transform-destructuring').default,
-      [
+      ["@babel/plugin-proposal-class-properties", { loose: true }],
-        require('@babel/plugin-proposal-class-properties').default,
+      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
-        {
-          loose: true
-        }
-      ],
       ["@babel/plugin-proposal-private-methods", { "loose": true }],
-      [
+      ['@babel/plugin-proposal-object-rest-spread', {useBuiltIns: true}],
-        require('@babel/plugin-proposal-object-rest-spread').default,
-        {
-          useBuiltIns: true
-        }
-      ],
       [
         require('@babel/plugin-transform-runtime').default,
         {

bin/yarn

@@ -1,9 +1,10 @@
 #!/usr/bin/env ruby
-APP_ROOT = File.expand_path('..', __dir__)
+
+APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
     select { |dir| File.expand_path(dir) != __dir__ }.
-    product(["yarn", "yarn.exe"]).
+    product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
     map { |dir, file| File.expand_path(file, dir) }.
     find { |file| File.executable?(file) }
 

config/webpack/base.js

@@ -0,0 +1,24 @@
+const { webpackConfig, merge } = require('@rails/webpacker')
+const vueConfig = require('./loaders/vue')
+
+const customConfig = {
+  resolve: {
+    extensions: ['.css']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.erb$/,
+        loader: 'rails-erb-loader'
+      }
+    ]
+  },
+  output: {
+    library: ["Danbooru"]
+  },
+  externals: {
+    jquery: "jQuery"
+  }
+}
+
+module.exports = merge(vueConfig, webpackConfig, customConfig)

config/webpack/development.js

@@ -1,8 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
-const eslint = require('./loaders/eslint')
 
-environment.loaders.append('eslint', eslint);
+module.exports = webpackConfig
-
-module.exports = environment.toWebpackConfig()

config/webpack/environment.js

@@ -1,32 +0,0 @@
-const { environment } = require('@rails/webpacker')
-const erb =  require('./loaders/erb')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
-const webpack = require('webpack');
-
-environment.loaders.append('scss.erb', {
-  test: /\.scss\.erb$/,
-  enforce: 'pre',
-  exclude: /node_modules/,
-  use: [
-    'style-loader',
-    'postcss-loader',
-    'sass-loader',
-    'rails-erb-loader'
-  ]
-});
-
-environment.loaders.append('vue', {
-  test: /\.vue$/,
-  use: 'vue-loader'
-});
-environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin());
-
-environment.loaders.append('erb', erb);
-
-environment.config.output.library = ["Danbooru"];
-
-environment.config.externals = {
-  jquery: "jQuery"
-}
-
-module.exports = environment

config/webpack/loaders/erb.js

@@ -1,11 +0,0 @@
-module.exports = {
-  test: /\.erb$/,
-  enforce: 'pre',
-  exclude: /node_modules/,
-  use: [{
-    loader: 'rails-erb-loader',
-    options: {
-      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
-    }
-  }]
-}

config/webpack/loaders/eslint.js

@@ -1,10 +0,0 @@
-module.exports = {
-  enforce: 'pre',
-  test: /\.(js)$/i,
-  exclude: /node_modules|vendor/,
-  loader: 'eslint-loader',
-  options: {
-    cache: true,
-    emitWarning: true,
-  }
-}

config/webpack/loaders/vue.js

@@ -0,0 +1,17 @@
+// config/webpack/rules/vue.js
+const { VueLoaderPlugin } = require('vue-loader')
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+    ]
+  },
+  plugins: [new VueLoaderPlugin()],
+  resolve: {
+    extensions: ['.vue']
+  }
+}

config/webpack/production.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpack/test.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

config/webpacker.yml

@@ -6,12 +6,11 @@ default: &default
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
+  webpack_compile_output: true
-  webpack_compile_output: false
 
-  # Additional paths webpack should lookup modules
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  additional_paths: []
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
@@ -53,30 +52,32 @@ default: &default
 development:
   <<: *default
   compile: true
-  webpack_compile_output: true
-
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: false
 
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
     host: localhost
     port: 3035
-    public: localhost:3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR
+    client:
-    inline: true
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
-    overlay: true
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    # Should we use gzip compression?
     compress: true
-    disable_host_check: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
-    use_local_ip: false
+    allowed_hosts: "all"
-    quiet: false
+    pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
-    watch_options:
+    static:
-      ignored: '**/node_modules/**'
+      watch:
-
+        ignored: '**/node_modules/**'
 
 test:
   <<: *default
@@ -91,8 +92,5 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
-  # Extract and emit a css file
-  extract_css: true
-
   # Cache manifest.json for performance
   cache_manifest: true

package.json

@@ -1,27 +1,34 @@
 {
-  "license": "MIT",
+  "name": "app",
+  "private": true,
   "dependencies": {
-    "@rails/webpacker": "~>5.x",
+    "@rails/webpacker": "^6.0.0-rc.5",
-    "debug-loader": "^0.0.1",
+    "babel-plugin-macros": "^3.1.0",
-    "expose-loader": "^0.7.5",
+    "css-loader": "^6.3.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "jquery-ui": "^1.12.1",
     "jquery-ujs": "^1.2.2",
+    "mini-css-extract-plugin": "^2.3.0",
     "qtip2": "^3.0.3",
-    "rails-erb-loader": "^5.4.2",
+    "rails-erb-loader": "^5.5.2",
+    "sass": "^1.42.1",
+    "sass-loader": "^12.1.0",
     "script-loader": "^0.7.2",
+    "style-loader": "^3.3.0",
     "vue": "^2.6.10",
     "vue-loader": "^15.7.0",
     "vue-template-compiler": "^2.6.10",
-    "webpack-cli": "^3.0.8",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0",
     "zingtouch": "^1.0.6"
   },
-  "devDependencies": {
+  "version": "0.1.0",
-    "eslint": "^5.3.0",
+  "babel": {
-    "eslint-loader": "^2.1.0",
+    "presets": [
-    "eslint-plugin-ignore-erb": "^0.1.1",
+      "./node_modules/@rails/webpacker/package/babel/preset.js"
-    "webpack-dev-server": "^3.9.0"
+    ]
   },
-  "scripts": {
+  "devDependencies": {
-    "lint": "yarn run eslint --plugin eslint-plugin-ignore-erb --ext .js,.js.erb app/javascript/src/javascripts"
+    "webpack-dev-server": "^4.2.1"
   }
 }