Upgrade to Webpacker 6.0.

config/webpack/base.js

@@ -0,0 +1,25 @@
+const { webpackConfig, merge } = require('@rails/webpacker')
+
+module.exports = merge(webpackConfig, {
+  output: {
+    library: "Danbooru",
+  },
+  resolve: {
+    alias: {
+      "jquery": "jquery/src/jquery.js",
+      "react": "preact/compat",
+      "react-dom": "preact/compat",
+    }
+  },
+  module: {
+    rules: [{
+      test: /.erb$/,
+      enforce: "pre",
+      exclude: /node_modules/,
+      loader: "rails-erb-loader",
+      options: {
+        runner: "bin/rails runner"
+      }
+    }]
+  },
+});

config/webpack/development.js

@@ -1,8 +1,15 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
-const eslint = require('./loaders/eslint')
+const { merge } = require('@rails/webpacker')
+const webpackConfig = require('./base');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
-environment.loaders.append('eslint', eslint);
-
-module.exports = environment.toWebpackConfig()
+module.exports = merge(webpackConfig, {
+  plugins: [
+    new ESLintPlugin({
+      cache: true,
+      threads: true,
+      emitWarning: true
+    })
+  ]
+});

config/webpack/environment.js

@@ -1,15 +0,0 @@
-const { environment } = require('@rails/webpacker')
-const erb =  require('./loaders/erb')
-const webpack = require('webpack');
-
-environment.loaders.append('erb', erb);
-
-environment.config.output.library = ["Danbooru"];
-
-environment.config.set("resolve.alias", {
-  "jquery": "jquery/src/jquery.js",
-  "react": "preact/compat",
-  "react-dom": "preact/compat",
-});
-
-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/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,8 +6,7 @@ default: &default
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: false
+  webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -17,7 +16,7 @@ default: &default
   cache_manifest: false
 
   # Extract and emit a css file
-  extract_css: false
+  extract_css: true
 
   static_assets_extensions:
     - .jpg
@@ -53,30 +52,33 @@ development:
   <<: *default
   compile: true
 
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
-  webpack_compile_output: true
-
   # 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
+    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
     inline: true
+    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
     overlay: true
+    # Should we use gzip compression?
     compress: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
     disable_host_check: true
+    # This option lets the browser open with your local IP
     use_local_ip: false
+    # When enabled, nothing except the initial startup information will be written to the console.
+    # This also means that errors or warnings from webpack are not visible.
     quiet: false
+    pretty: false
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:
       ignored: '**/node_modules/**'
 
-
 test:
   <<: *default
   compile: true
@@ -90,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