Replace to shakapacker from webpacker

2024-11-20 03:25:17 +01:00 · 2022-05-09 17:57:57 +00:00 · 2022-05-09 17:57:57 +00:00 · 64ee565b33
commit 64ee565b33
parent 0aacf00f5b
80 changed files with 1737 additions and 3956 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -4,4 +4,6 @@ not IE 11
 not dead

 [development]
-supports es6-module
+last 1 chrome version
+last 1 firefox version
+last 1 safari version
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -65,7 +65,7 @@ jobs:
      - install-ruby-dependencies:
          ruby-version: '3.0'
      - node/install-packages:
-          cache-version: v1
+          cache-version: v2
          pkg-manager: yarn
      - run:
          command: ./bin/rails assets:precompile
@ -214,7 +214,7 @@ workflows:
          requires:
            - build
      - node/run:
-          cache-version: v1
+          cache-version: v2
          name: test-webui
          pkg-manager: yarn
          requires:
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -8,10 +8,6 @@ module.exports = {
    jest: true,
  },

-  globals: {
-    ATTACHMENT_HOST: false,
-  },
-
  parser: '@babel/eslint-parser',

  plugins: [
--- a/.gitignore
+++ b/.gitignore
@ -59,7 +59,8 @@ npm-debug.log

 # Ignore yarn log files
 yarn-error.log
-yarn-debug.log
+yarn-debug.log*
+.yarn-integrity

 # Ignore vagrant log files
 *-cloudimg-console.log
--- a/.yarnclean
+++ b/.yarnclean
@ -44,3 +44,4 @@ Gruntfile.js
 # for specific ignore
 !.svgo.yml
 !sass-lint/**/*.yml
+!shakapacker/**/*.yml
--- a/2
+++ b/2
@ -84,13 +84,13 @@ gem 'sidekiq-unique-jobs', '~> 7.1'
 gem 'sidekiq-bulk', '~> 0.2.0'
 gem 'simple-navigation', '~> 4.4'
 gem 'simple_form', '~> 5.1'
+gem 'shakapacker', '~> 6.5'
 gem 'sprockets-rails', '~> 3.4', require: 'sprockets/railtie'
 gem 'stoplight', '~> 3.0.0'
 gem 'strong_migrations', '~> 0.7'
 gem 'tty-prompt', '~> 0.23', require: false
 gem 'twitter-text', '~> 3.1.0'
 gem 'tzinfo-data', '~> 1.2022'
-gem 'webpacker', '~> 5.4'
 gem 'webpush', git: 'https://github.com/ClearlyClaire/webpush.git', ref: 'f14a4d52e201128b1b00245d11b6de80d6cfdcd9'
 gem 'webauthn', '~> 2.5'

--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -496,7 +496,7 @@ GEM
      httpclient
      json-jwt (>= 1.11.0)
      rack (>= 2.1.0)
-    rack-proxy (0.7.0)
+    rack-proxy (0.7.2)
      rack
    rack-test (2.0.2)
      rack (>= 1.3)
@ -610,6 +610,11 @@ GEM
      activerecord (>= 4.0.0)
      railties (>= 4.0.0)
    semantic_range (3.0.0)
+    shakapacker (6.5.2)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
    sidekiq (6.5.6)
      connection_pool (>= 2.2.5)
      rack (~> 2.0)
@ -714,11 +719,6 @@ GEM
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
    websocket-driver (0.7.5)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
@ -833,6 +833,7 @@ DEPENDENCIES
  ruby-progressbar (~> 1.11)
  sanitize (~> 6.0)
  scenic (~> 1.6)
+  shakapacker (~> 6.5)
  sidekiq (~> 6.5)
  sidekiq-bulk (~> 0.2.0)
  sidekiq-scheduler (~> 4.0)
@ -851,6 +852,5 @@ DEPENDENCIES
  tzinfo-data (~> 1.2022)
  webauthn (~> 2.5)
  webmock (~> 3.18)
-  webpacker (~> 5.4)
  webpush!
  xorcist (~> 1.1)
--- a/Procfile.dev
+++ b/Procfile.dev
@ -1,4 +1,4 @@
 web: env PORT=3000 RAILS_ENV=development bundle exec puma -C config/puma.rb
 sidekiq: env PORT=3000 RAILS_ENV=development bundle exec sidekiq
 stream: env PORT=4000 yarn run start
-webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0
+webpack: env WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpacker-dev-server
--- a/app/helpers/mascot_helper.rb
+++ b/app/helpers/mascot_helper.rb
@ -2,7 +2,7 @@

 module MascotHelper
  def mascot_url
-    full_asset_url(instance_presenter.mascot&.file&.url || asset_pack_path('media/images/elephant_ui_plane.svg'))
+    full_asset_url(instance_presenter.mascot&.file&.url || asset_pack_path('static/elephant_ui_plane.svg'))
  end

  private
--- a/app/javascript/packs/about.js
+++ b/app/javascript/packs/about.js
@ -1,11 +1,11 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
+import 'mastodon/public-path';
+import loadPolyfills from 'mastodon/load_polyfills';
+import { start } from 'mastodon/common';

 start();

 function loaded() {
-  const TimelineContainer = require('../mastodon/containers/timeline_container').default;
+  const TimelineContainer = require('mastodon/containers/timeline_container').default;
  const React             = require('react');
  const ReactDOM          = require('react-dom');
  const mountNode         = document.getElementById('mastodon-timeline');
@ -17,7 +17,7 @@ function loaded() {
 }

 function main() {
-  const ready = require('../mastodon/ready').default;
+  const ready = require('mastodon/ready').default;
  ready(loaded);
 }

--- a/app/javascript/packs/admin.js
+++ b/app/javascript/packs/admin.js
@ -1,6 +1,6 @@
-import './public-path';
+import 'mastodon/public-path';
 import { delegate } from '@rails/ujs';
-import ready from '../mastodon/ready';
+import ready from 'mastodon/ready';

 const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]';

@ -170,8 +170,8 @@ ready(() => {
    const componentName  = element.getAttribute('data-admin-component');
    const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));

-    import('../mastodon/containers/admin_component').then(({ default: AdminComponent }) => {
-      return import('../mastodon/components/admin/' + componentName).then(({ default: Component }) => {
+    import('mastodon/containers/admin_component').then(({ default: AdminComponent }) => {
+      return import('mastodon/components/admin/' + componentName).then(({ default: Component }) => {
        ReactDOM.render((
          <AdminComponent locale={locale}>
            <Component {...componentProps} />
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@ -0,0 +1,11 @@
+import 'mastodon/public-path';
+import loadPolyfills from 'mastodon/load_polyfills';
+import { start } from 'mastodon/common';
+
+start();
+
+loadPolyfills().then(() => {
+  require('mastodon/main').default();
+}).catch(e => {
+  console.error(e);
+});
--- a/app/javascript/packs/error.js
+++ b/app/javascript/packs/error.js
@ -1,5 +1,5 @@
-import './public-path';
-import ready from '../mastodon/ready';
+import 'mastodon/public-path';
+import ready from 'mastodon/ready';

 ready(() => {
  const image = document.querySelector('img');
--- a/app/javascript/mailer.js
+++ b/app/javascript/mailer.js
@ -0,0 +1,3 @@
+require('./styles/mailer.scss');
+
+require.context('./icons');
--- a/app/javascript/mastodon/common.js
+++ b/app/javascript/mastodon/common.js
@ -1,4 +1,4 @@
-import Rails from '@rails/ujs';
+import * as Rails from '@rails/ujs';

 export function start() {
  require('font-awesome/css/font-awesome.css');
--- a/app/javascript/mastodon/main.js
+++ b/app/javascript/mastodon/main.js
@ -39,6 +39,7 @@ function main() {
          console.error(err);
        });
    }
+
    perf.stop('main()');
  });
 }
--- a/app/javascript/mastodon/public-path.js
+++ b/app/javascript/mastodon/public-path.js
--- a/app/javascript/mastodon/service_worker/web_push_notifications.js
+++ b/app/javascript/mastodon/service_worker/web_push_notifications.js
@ -1,6 +1,6 @@
 import IntlMessageFormat from 'intl-messageformat';
-import locales from './web_push_locales';
 import { unescape } from 'lodash';
+import locales from './web_push_locales';

 const MAX_NOTIFICATIONS = 5;
 const GROUP_TAG = 'tag';
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@ -1,11 +0,0 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
-
-start();
-
-loadPolyfills().then(() => {
-  require('../mastodon/main').default();
-}).catch(e => {
-  console.error(e);
-});
--- a/app/javascript/packs/mailer.js
+++ b/app/javascript/packs/mailer.js
@ -1,3 +0,0 @@
-require('../styles/mailer.scss');
-
-require.context('../icons');
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@ -1,10 +1,10 @@
-import './public-path';
-import escapeTextContentForBrowser from 'escape-html';
-import loadPolyfills from '../mastodon/load_polyfills';
-import ready from '../mastodon/ready';
-import { start } from '../mastodon/common';
-import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
+import 'mastodon/public-path';
 import 'cocoon-js-vanilla';
+import escapeTextContentForBrowser from 'escape-html';
+import loadPolyfills from 'mastodon/load_polyfills';
+import ready from 'mastodon/ready';
+import { start } from 'mastodon/common';
+import loadKeyboardExtensions from 'mastodon/load_keyboard_extensions';

 start();

@ -26,10 +26,10 @@ window.addEventListener('message', e => {

 function main() {
  const IntlMessageFormat = require('intl-messageformat').default;
-  const { timeAgoString } = require('../mastodon/components/relative_timestamp');
+  const { timeAgoString } = require('mastodon/components/relative_timestamp');
  const { delegate } = require('@rails/ujs');
-  const emojify = require('../mastodon/features/emoji/emoji').default;
-  const { getLocale } = require('../mastodon/locales');
+  const emojify = require('mastodon/features/emoji/emoji').default;
+  const { getLocale } = require('mastodon/locales');
  const { messages } = getLocale();
  const React = require('react');
  const ReactDOM = require('react-dom');
@ -90,7 +90,7 @@ function main() {
    const reactComponents = document.querySelectorAll('[data-component]');

    if (reactComponents.length > 0) {
-      import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container')
+      import(/* webpackChunkName: "containers/media_container" */ 'mastodon/containers/media_container')
        .then(({ default: MediaContainer }) => {
          [].forEach.call(reactComponents, (component) => {
            [].forEach.call(component.children, (child) => {
--- a/app/javascript/packs/share.js
+++ b/app/javascript/packs/share.js
@ -1,11 +1,11 @@
-import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
-import { start } from '../mastodon/common';
+import 'mastodon/public-path';
+import loadPolyfills from 'mastodon/load_polyfills';
+import { start } from 'mastodon/common';

 start();

 function loaded() {
-  const ComposeContainer = require('../mastodon/containers/compose_container').default;
+  const ComposeContainer = require('mastodon/containers/compose_container').default;
  const React = require('react');
  const ReactDOM = require('react-dom');
  const mountNode = document.getElementById('mastodon-compose');
@ -17,7 +17,7 @@ function loaded() {
 }

 function main() {
-  const ready = require('../mastodon/ready').default;
+  const ready = require('mastodon/ready').default;
  ready(loaded);
 }

--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@ -164,7 +164,7 @@ $small-breakpoint: 960px;
    td {
      padding: 8px;
      align-self: start;
-      align-items: start;
+      align-items: flex-start;
      word-break: break-all;

      &.nowrap {
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@ -1758,7 +1758,7 @@ a.account__display-name {
  width: 100%;
  height: 100%;
  display: flex;
-  align-items: center;
+  align-items: flex-center;
  justify-content: center;
  flex-direction: column;
  scrollbar-width: none; /* Firefox */
@ -2619,7 +2619,7 @@ a.account__display-name {

 .column-actions {
  display: flex;
-  align-items: start;
+  align-items: flex-start;
  justify-content: center;
  padding: 40px;
  padding-top: 40px;
--- a/app/javascript/packs/two_factor_authentication.js
+++ b/app/javascript/packs/two_factor_authentication.js
@ -1,7 +1,7 @@
-import axios from 'axios';
-import * as WebAuthnJSON from '@github/webauthn-json';
-import ready from '../mastodon/ready';
 import 'regenerator-runtime/runtime';
+import * as WebAuthnJSON from '@github/webauthn-json';
+import axios from 'axios';
+import ready from 'mastodon/ready';

 function getCSRFToken() {
  var CSRFSelector = document.querySelector('meta[name="csrf-token"]');
--- a/app/serializers/manifest_serializer.rb
+++ b/app/serializers/manifest_serializer.rb
@ -32,7 +32,7 @@ class ManifestSerializer < ActiveModel::Serializer
  def icons
    ICON_SIZES.map do |size|
      {
-        src: full_pack_url("media/icons/android-chrome-#{size}x#{size}.png"),
+        src: full_pack_url("static/android-chrome-#{size}x#{size}.png"),
        sizes: "#{size}x#{size}",
        type: 'image/png',
      }
--- a/app/serializers/rest/instance_serializer.rb
+++ b/app/serializers/rest/instance_serializer.rb
@ -39,7 +39,7 @@ class REST::InstanceSerializer < ActiveModel::Serializer
  end

  def thumbnail
-    instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('media/images/preview.png')
+    instance_presenter.thumbnail ? full_asset_url(instance_presenter.thumbnail.file.url) : full_pack_url('static/preview.png')
  end

  def stats
--- a/app/views/about/more.html.haml
+++ b/app/views/about/more.html.haml
@ -9,7 +9,7 @@
  .column-0
    .public-account-header.public-account-header--no-bar
      .public-account-header__image
-        = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title, class: 'parallax'
+        = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('static/preview.png'), alt: @instance_presenter.site_title, class: 'parallax'

  .column-1
    .landing-page__call-to-action{ dir: 'ltr' }
@ -25,7 +25,7 @@
            %span= t 'about.status_count_after', count: @instance_presenter.status_count
        .row__mascot
          .landing-page__mascot
-            = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('media/images/elephant_ui_plane.svg'), alt: ''
+            = image_tag @instance_presenter.mascot&.file&.url || asset_pack_path('static/elephant_ui_plane.svg'), alt: ''

  .column-2
    .contact-widget
--- a/app/views/about/show.html.haml
+++ b/app/views/about/show.html.haml
@ -53,7 +53,7 @@

      .hero-widget
        .hero-widget__img
-          = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title
+          = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('static/preview.png'), alt: @instance_presenter.site_title

        .hero-widget__text
          %p
--- a/app/views/application/_sidebar.html.haml
+++ b/app/views/application/_sidebar.html.haml
@ -1,6 +1,6 @@
 .hero-widget
  .hero-widget__img
-    = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('media/images/preview.png'), alt: @instance_presenter.site_title
+    = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('static/preview.png'), alt: @instance_presenter.site_title

  .hero-widget__text
    %p= @instance_presenter.site_short_description.html_safe.presence || t('about.about_mastodon_html')
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@ -14,12 +14,12 @@
    %link{ rel: 'icon', href: '/favicon.ico', type: 'image/x-icon' }/

    - %w(16 32 48).each do |size|
-      %link{ rel: 'icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/favicon-#{size}x#{size}.png"), type: 'image/png' }/
+      %link{ rel: 'icon', sizes: "#{size}x#{size}", href: asset_pack_path("static/favicon-#{size}x#{size}.png"), type: 'image/png' }/

    - %w(57 60 72 76 114 120 144 152 167 180 1024).each do |size|
-      %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/apple-touch-icon-#{size}x#{size}.png") }/
+      %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: asset_pack_path("static/apple-touch-icon-#{size}x#{size}.png") }/

-    %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/
+    %link{ rel: 'mask-icon', href: asset_pack_path('static/logo-symbol-icon.svg'), color: '#6364FF' }/
    %link{ rel: 'manifest', href: manifest_path(format: :json) }/
    %meta{ name: 'theme-color', content: '#6364FF' }/
    %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/
--- a/app/views/layouts/mailer.html.haml
+++ b/app/views/layouts/mailer.html.haml
@ -24,7 +24,7 @@
                              %tr
                                %td.column-cell
                                  = link_to root_url do
-                                    = image_tag full_pack_url('media/images/mailer/wordmark.png'), alt: 'Mastodon', height: 34, class: 'logo'
+                                    = image_tag full_pack_url('static/mailer/wordmark.png'), alt: 'Mastodon', height: 34, class: 'logo'

    = yield

@ -49,4 +49,4 @@
                                %p= link_to t('application_mailer.notification_preferences'), settings_preferences_notifications_url
                              %td.column-cell.text-right
                                = link_to root_url do
-                                  = image_tag full_pack_url('media/images/mailer/logo.png'), alt: 'Mastodon', height: 24
+                                  = image_tag full_pack_url('static/mailer/logo.png'), alt: 'Mastodon', height: 24
--- a/app/views/notification_mailer/favourite.html.haml
+++ b/app/views/notification_mailer/favourite.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_grade.png'), alt:''
+                                      = image_tag full_pack_url('static/mailer/icon_grade.png'), alt:''

                              %h1= t 'notification_mailer.favourite.title'
                              %p.lead= t('notification_mailer.favourite.body', name: @account.pretty_acct)
--- a/app/views/notification_mailer/follow.html.haml
+++ b/app/views/notification_mailer/follow.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_person_add.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_person_add.png'), alt: ''

                              %h1= t 'notification_mailer.follow.title'
                              %p.lead= t('notification_mailer.follow.body', name: @account.pretty_acct)
--- a/app/views/notification_mailer/follow_request.html.haml
+++ b/app/views/notification_mailer/follow_request.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_person_add.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_person_add.png'), alt: ''

                              %h1= t 'notification_mailer.follow_request.title'
                              %p.lead= t('notification_mailer.follow_request.body', name: @account.pretty_acct)
--- a/app/views/notification_mailer/mention.html.haml
+++ b/app/views/notification_mailer/mention.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_reply.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_reply.png'), alt: ''

                              %h1= t 'notification_mailer.mention.title'
                              %p.lead= t('notification_mailer.mention.body', name: @status.account.pretty_acct)
--- a/app/views/notification_mailer/reblog.html.haml
+++ b/app/views/notification_mailer/reblog.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_cached.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_cached.png'), alt: ''

                              %h1= t 'notification_mailer.reblog.title'
                              %p.lead= t('notification_mailer.reblog.body', name: @account.pretty_acct)
--- a/app/views/shared/_og.html.haml
+++ b/app/views/shared/_og.html.haml
@ -8,7 +8,7 @@
 = opengraph 'og:type', 'website'
 = opengraph 'og:title', @instance_presenter.site_title
 = opengraph 'og:description', description
-= opengraph 'og:image', full_asset_url(thumbnail&.file&.url || asset_pack_path('media/images/preview.png', protocol: :request))
+= opengraph 'og:image', full_asset_url(thumbnail&.file&.url || asset_pack_path('static/preview.png', protocol: :request))
 = opengraph 'og:image:width', thumbnail ? thumbnail.meta['width'] : '1200'
 = opengraph 'og:image:height', thumbnail ? thumbnail.meta['height'] : '630'
 = opengraph 'twitter:card', 'summary_large_image'
--- a/app/views/user_mailer/appeal_approved.html.haml
+++ b/app/views/user_mailer/appeal_approved.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_done.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_done.png'), alt: ''

                              %h1= t 'user_mailer.appeal_approved.title'

--- a/app/views/user_mailer/appeal_rejected.html.haml
+++ b/app/views/user_mailer/appeal_rejected.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_warning.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_warning.png'), alt: ''

                              %h1= t 'user_mailer.appeal_rejected.title'

--- a/app/views/user_mailer/backup_ready.html.haml
+++ b/app/views/user_mailer/backup_ready.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_file_download.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_file_download.png'), alt: ''

                              %h1= t 'user_mailer.backup_ready.title'

--- a/app/views/user_mailer/confirmation_instructions.html.haml
+++ b/app/views/user_mailer/confirmation_instructions.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_email.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_email.png'), alt: ''

                              %h1= t 'devise.mailer.confirmation_instructions.title'

--- a/app/views/user_mailer/email_changed.html.haml
+++ b/app/views/user_mailer/email_changed.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_email.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_email.png'), alt: ''

                              %h1= t 'devise.mailer.email_changed.title'
                              %p.lead= t 'devise.mailer.email_changed.explanation'
--- a/app/views/user_mailer/password_change.html.haml
+++ b/app/views/user_mailer/password_change.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.password_change.title'
                              %p.lead= t 'devise.mailer.password_change.explanation'
--- a/app/views/user_mailer/reconfirmation_instructions.html.haml
+++ b/app/views/user_mailer/reconfirmation_instructions.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_email.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_email.png'), alt: ''

                              %h1= t 'devise.mailer.reconfirmation_instructions.title'
                              %p.lead= t 'devise.mailer.reconfirmation_instructions.explanation'
--- a/app/views/user_mailer/reset_password_instructions.html.haml
+++ b/app/views/user_mailer/reset_password_instructions.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.reset_password_instructions.title'
                              %p.lead= t 'devise.mailer.reset_password_instructions.explanation'
--- a/app/views/user_mailer/suspicious_sign_in.html.haml
+++ b/app/views/user_mailer/suspicious_sign_in.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'user_mailer.suspicious_sign_in.title'
                              %p= t 'user_mailer.suspicious_sign_in.explanation'
--- a/app/views/user_mailer/two_factor_disabled.html.haml
+++ b/app/views/user_mailer/two_factor_disabled.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.two_factor_disabled.title'
                              %p.lead= t 'devise.mailer.two_factor_disabled.explanation'
--- a/app/views/user_mailer/two_factor_enabled.html.haml
+++ b/app/views/user_mailer/two_factor_enabled.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.two_factor_enabled.title'
                              %p.lead= t 'devise.mailer.two_factor_enabled.explanation'
--- a/app/views/user_mailer/two_factor_recovery_codes_changed.html.haml
+++ b/app/views/user_mailer/two_factor_recovery_codes_changed.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.two_factor_recovery_codes_changed.title'
                              %p.lead= t 'devise.mailer.two_factor_recovery_codes_changed.explanation'
--- a/app/views/user_mailer/warning.html.haml
+++ b/app/views/user_mailer/warning.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_flag.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_flag.png'), alt: ''

                              %h1= t "user_mailer.warning.title.#{@warning.action}"

--- a/app/views/user_mailer/webauthn_credential_added.html.haml
+++ b/app/views/user_mailer/webauthn_credential_added.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.webauthn_credential.added.title'
                              %p.lead= "#{t 'devise.mailer.webauthn_credential.added.explanation' }:"
--- a/app/views/user_mailer/webauthn_credential_deleted.html.haml
+++ b/app/views/user_mailer/webauthn_credential_deleted.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.webauthn_credential.deleted.title'
                              %p.lead= "#{t 'devise.mailer.webauthn_credential.deleted.explanation' }:"
--- a/app/views/user_mailer/webauthn_disabled.html.haml
+++ b/app/views/user_mailer/webauthn_disabled.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.webauthn_disabled.title'
                              %p.lead= t 'devise.mailer.webauthn_disabled.explanation'
--- a/app/views/user_mailer/webauthn_enabled.html.haml
+++ b/app/views/user_mailer/webauthn_enabled.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_lock_open.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_lock_open.png'), alt: ''

                              %h1= t 'devise.mailer.webauthn_enabled.title'
                              %p.lead= t 'devise.mailer.webauthn_enabled.explanation'
--- a/app/views/user_mailer/welcome.html.haml
+++ b/app/views/user_mailer/welcome.html.haml
@ -17,7 +17,7 @@
                                %tbody
                                  %tr
                                    %td
-                                      = image_tag full_pack_url('media/images/mailer/icon_done.png'), alt: ''
+                                      = image_tag full_pack_url('static/mailer/icon_done.png'), alt: ''

                              %h1= t 'user_mailer.welcome.title', name: @resource.account.username
                              %p.lead= t 'user_mailer.welcome.explanation'
--- a/bin/webpacker
+++ b/bin/webpacker
@ -1,18 +1,14 @@
 #!/usr/bin/env ruby

-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
 require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
-require "rubygems"
 require "bundler/setup"
-
 require "webpacker"
 require "webpacker/webpack_runner"

+ENV["RAILS_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__)
 Dir.chdir(APP_ROOT) do
  Webpacker::WebpackRunner.run(ARGV)
--- a/bin/webpacker-dev-server
+++ b/bin/webpacker-dev-server
@ -1,13 +1,12 @@
 #!/usr/bin/env ruby

-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
+ENV["RAILS_ENV"] ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]

 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
  Pathname.new(__FILE__).realpath)

-require "rubygems"
 require "bundler/setup"

 require "webpacker"
--- a/bin/yarn
+++ b/bin/yarn
@ -1,17 +0,0 @@
-#!/usr/bin/env ruby
-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.cmd", "yarn.ps1"]).
-    map { |dir, file| File.expand_path(file, dir) }.
-    find { |file| File.executable?(file) }
-
-  if yarn
-    exec yarn, *ARGV
-  else
-    $stderr.puts "Yarn executable was not detected in the system."
-    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
-    exit 1
-  end
-end
--- a/config/webpack/configuration.js
+++ b/config/webpack/configuration.js
@ -1,27 +0,0 @@
-// Common configuration for webpacker loaded from config/webpacker.yml
-
-const { resolve } = require('path');
-const { env } = require('process');
-const { load } = require('js-yaml');
-const { readFileSync } = require('fs');
-
-const configPath = resolve('config', 'webpacker.yml');
-const settings = load(readFileSync(configPath), 'utf8')[env.RAILS_ENV || env.NODE_ENV];
-
-const themePath = resolve('config', 'themes.yml');
-const themes = load(readFileSync(themePath), 'utf8');
-
-const output = {
-  path: resolve('public', settings.public_output_path),
-  publicPath: `/${settings.public_output_path}/`,
-};
-
-module.exports = {
-  settings,
-  themes,
-  env: {
-    NODE_ENV: env.NODE_ENV,
-    PUBLIC_OUTPUT_PATH: settings.public_output_path,
-  },
-  output,
-};
--- a/config/webpack/development.js
+++ b/config/webpack/development.js
@ -1,61 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { merge } = require('webpack-merge');
-const sharedConfig = require('./shared');
-const { settings, output } = require('./configuration');
-
-const watchOptions = {};
-
-if (process.env.VAGRANT) {
-  // If we are in Vagrant, we can't rely on inotify to update us with changed
-  // files, so we must poll instead. Here, we poll every second to see if
-  // anything has changed.
-  watchOptions.poll = 1000;
-}
-
-module.exports = merge(sharedConfig, {
-  mode: 'development',
-  cache: true,
-  devtool: 'cheap-module-eval-source-map',
-
-  stats: {
-    errorDetails: true,
-  },
-
-  output: {
-    pathinfo: true,
-  },
-
-  devServer: {
-    clientLogLevel: 'none',
-    compress: settings.dev_server.compress,
-    quiet: settings.dev_server.quiet,
-    disableHostCheck: settings.dev_server.disable_host_check,
-    host: settings.dev_server.host,
-    port: settings.dev_server.port,
-    https: settings.dev_server.https,
-    hot: settings.dev_server.hmr,
-    contentBase: output.path,
-    inline: settings.dev_server.inline,
-    useLocalIp: settings.dev_server.use_local_ip,
-    public: settings.dev_server.public,
-    publicPath: output.publicPath,
-    historyApiFallback: {
-      disableDotRule: true,
-    },
-    headers: settings.dev_server.headers,
-    overlay: settings.dev_server.overlay,
-    stats: {
-      entrypoints: false,
-      errorDetails: false,
-      modules: false,
-      moduleTrace: false,
-    },
-    watchOptions: Object.assign(
-      {},
-      settings.dev_server.watch_options,
-      watchOptions,
-    ),
-    writeToDisk: filePath => /ocr/.test(filePath),
-  },
-});
--- a/config/webpack/env.js
+++ b/config/webpack/env.js
@ -0,0 +1,6 @@
+const { config, env } = require('shakapacker');
+
+module.exports = {
+  NODE_ENV: env.nodeEnv,
+  PUBLIC_OUTPUT_PATH: config.public_output_path,
+};
--- a/config/webpack/environments/base.js
+++ b/config/webpack/environments/base.js
@ -0,0 +1,91 @@
+const { readFileSync } = require('fs');
+const { load } = require('js-yaml');
+const { basename, join, resolve } = require('path');
+const extname = require('path-complete-extname');
+const { config, merge, webpackConfig: originalBaseWebpackConfig } = require('shakapacker');
+const webpack = require('webpack');
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+const env = require('../env');
+const nodeModulesRule = require('../rules/node_modules');
+const tesseractRule = require('../rules/tesseract');
+const localePackPaths = require('../generateLocalePacks');
+
+const themePath = resolve('config', 'themes.yml');
+const themes = load(readFileSync(themePath), 'utf8');
+
+/**
+ * @param {import('webpack').WebpackPluginInstance | ((this: webpack.Compiler, compiler: webpack.Compiler) => void)} plugin
+ * @returns {boolean}
+ */
+function isAllowedPlugin(plugin) {
+  return !(plugin instanceof WebpackAssetsManifest || plugin instanceof webpack.EnvironmentPlugin);
+}
+
+/** @type {import('webpack').Configuration} */
+const baseWebpackConfig = {
+  ...originalBaseWebpackConfig,
+  optimization: {},
+  plugins: originalBaseWebpackConfig.plugins.filter(isAllowedPlugin),
+};
+
+/** @type {import('webpack').Configuration} */
+const options = {
+  target: 'web',
+  entry: {
+    ...localePackPaths.reduce((map, entry) => ({
+      ...map,
+      [basename(entry, extname(entry, extname(entry)))]: resolve(entry),
+    }), {}),
+    ...Object.keys(themes).reduce((themePaths, name) => ({
+      ...themePaths,
+      [name]: resolve(join(config.source_path, themes[name])),
+    }), {}),
+  },
+  module: {
+    rules: [
+      nodeModulesRule,
+      tesseractRule,
+    ],
+  },
+  optimization: {
+    chunkIds: 'total-size',
+    moduleIds: 'size',
+    runtimeChunk: {
+      name: 'common',
+    },
+    splitChunks: {
+      cacheGroups: {
+        default: false,
+        vendors: false,
+        common: {
+          name: 'common',
+          chunks: 'all',
+          minChunks: 2,
+          minSize: 0,
+          test: /^(?!.*[\\\/]node_modules[\\\/]react-intl[\\\/]).+$/,
+        },
+      },
+    },
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
+    new WebpackAssetsManifest({
+      entrypoints: true,
+      entrypointsUseAssets: true,
+      integrity: true,
+      integrityHashes: ['sha256'],
+      output: config.manifestPath,
+      publicPath: true,
+      writeToDisk: true,
+    }),
+    new webpack.NormalModuleReplacementPlugin(
+      /^history\//, (resource) => {
+        // temporary fix for https://github.com/ReactTraining/react-router/issues/5576
+        // to reduce bundle size
+        resource.request = resource.request.replace(/^history/, 'history/es');
+      },
+    ),
+  ],
+};
+
+module.exports = merge({}, baseWebpackConfig, options);
--- a/config/webpack/environments/development.js
+++ b/config/webpack/environments/development.js
@ -0,0 +1,39 @@
+const { env, merge } = require('shakapacker');
+const markRule = require('../rules/mark');
+const baseConfig = require('./base');
+
+/** @type {import('webpack').Configuration} */
+let developmentConfig = {
+  module: {
+    rules: [
+      markRule,
+    ],
+  },
+};
+
+if (env.runningWebpackDevServer) {
+  developmentConfig = merge(developmentConfig, {
+    devServer: {
+      devMiddleware: {
+        writeToDisk: filePath => /ocr/.test(filePath),
+      },
+    },
+  });
+}
+
+if (process.env.VAGRANT) {
+  developmentConfig = merge(developmentConfig, {
+    devServer: {
+      static: {
+        watch: {
+          // If we are in Vagrant, we can't rely on inotify to update us with changed
+          // files, so we must poll instead. Here, we poll every second to see if
+          // anything has changed.
+          poll: 1_000,
+        },
+      },
+    },
+  });
+}
+
+module.exports = merge({}, baseConfig, developmentConfig);
--- a/config/webpack/environments/production.js
+++ b/config/webpack/environments/production.js
@ -1,39 +1,16 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
 const { createHash } = require('crypto');
 const { readFileSync } = require('fs');
 const { resolve } = require('path');
-const { merge } = require('webpack-merge');
+const { merge } = require('shakapacker');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const TerserPlugin = require('terser-webpack-plugin');
-const CompressionPlugin = require('compression-webpack-plugin');
 const { InjectManifest } = require('workbox-webpack-plugin');
-const sharedConfig = require('./shared');
+const baseConfig = require('./base');

-const root = resolve(__dirname, '..', '..');
-
-module.exports = merge(sharedConfig, {
-  mode: 'production',
-  devtool: 'source-map',
-  stats: 'normal',
-  bail: true,
-  optimization: {
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true,
-      }),
-    ],
-  },
+const root = resolve(__dirname, '..', '..', '..');

+/** @type {import('webpack').Configuration} */
+const productionConfig = {
  plugins: [
-    new CompressionPlugin({
-      filename: '[path][base].gz[query]',
-      cache: true,
-      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/,
-    }),
    new BundleAnalyzerPlugin({ // generates report.html
      analyzerMode: 'static',
      openAnalyzer: false,
@ -63,4 +40,6 @@ module.exports = merge(sharedConfig, {
      swSrc: resolve(root, 'app', 'javascript', 'mastodon', 'service_worker', 'entry.js'),
    }),
  ],
-});
+};
+
+module.exports = merge({}, baseConfig, productionConfig);
--- a/config/webpack/environments/test.js
+++ b/config/webpack/environments/test.js
@ -0,0 +1,9 @@
+const { merge } = require('shakapacker');
+const baseConfig = require('./base');
+
+/** @type {import('webpack').Configuration} */
+const testConfig = {
+  mode: 'development',
+};
+
+module.exports = merge({}, baseConfig, testConfig);
--- a/config/webpack/rules/babel.js
+++ b/config/webpack/rules/babel.js
@ -1,21 +0,0 @@
-const { join, resolve } = require('path');
-const { env, settings } = require('../configuration');
-
-module.exports = {
-  test: /\.(js|jsx|mjs)$/,
-  include: [
-    settings.source_path,
-    ...settings.resolved_paths,
-  ].map(p => resolve(p)),
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: 'babel-loader',
-      options: {
-        cacheDirectory: join(settings.cache_path, 'babel-loader'),
-        cacheCompression: env.NODE_ENV === 'production',
-        compact: env.NODE_ENV === 'production',
-      },
-    },
-  ],
-};
--- a/config/webpack/rules/css.js
+++ b/config/webpack/rules/css.js
@ -1,28 +0,0 @@
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-module.exports = {
-  test: /\.s?css$/i,
-  use: [
-    MiniCssExtractPlugin.loader,
-    {
-      loader: 'css-loader',
-      options: {
-        sourceMap: true,
-        importLoaders: 2,
-      },
-    },
-    {
-      loader: 'postcss-loader',
-      options: {
-        sourceMap: true,
-      },
-    },
-    {
-      loader: 'sass-loader',
-      options: {
-        implementation: require('sass'),
-        sourceMap: true,
-      },
-    },
-  ],
-};
--- a/config/webpack/rules/file.js
+++ b/config/webpack/rules/file.js
@ -1,20 +0,0 @@
-const { join } = require('path');
-const { settings } = require('../configuration');
-
-module.exports = {
-  test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'),
-  use: [
-    {
-      loader: 'file-loader',
-      options: {
-        name(file) {
-          if (file.includes(settings.source_path)) {
-            return 'media/[path][name]-[hash].[ext]';
-          }
-          return 'media/[folder]/[name]-[hash:8].[ext]';
-        },
-        context: join(settings.source_path),
-      },
-    },
-  ],
-};
--- a/config/webpack/rules/index.js
+++ b/config/webpack/rules/index.js
@ -1,16 +0,0 @@
-const babel = require('./babel');
-const css = require('./css');
-const file = require('./file');
-const tesseract = require('./tesseract');
-const nodeModules = require('./node_modules');
-
-// Webpack loaders are processed in reverse order
-// https://webpack.js.org/concepts/loaders/#loader-features
-// Lastly, process static files using file loader
-module.exports = {
-  file,
-  tesseract,
-  css,
-  nodeModules,
-  babel,
-};
--- a/config/webpack/rules/mark.js
+++ b/config/webpack/rules/mark.js
@ -1,8 +1,4 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = {};
-} else {
-  module.exports = {
-    test: /\.js$/,
-    loader: 'mark-loader',
-  };
-}
+module.exports = {
+  test: /\.js$/,
+  loader: 'mark-loader',
+};
--- a/config/webpack/rules/node_modules.js
+++ b/config/webpack/rules/node_modules.js
@ -1,5 +1,5 @@
 const { join } = require('path');
-const { settings, env } = require('../configuration');
+const { config, env } = require('shakapacker');

 module.exports = {
  test: /\.(js|mjs)$/,
@ -16,8 +16,8 @@ module.exports = {
        plugins: [
          'transform-react-remove-prop-types',
        ],
-        cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
-        cacheCompression: env.NODE_ENV === 'production',
+        cacheDirectory: join(config.cache_path, 'babel-loader-node-modules'),
+        cacheCompression: env.isProduction,
        compact: false,
        sourceMaps: false,
      },
--- a/config/webpack/rules/tesseract.js
+++ b/config/webpack/rules/tesseract.js
@ -1,14 +1,12 @@
 module.exports = {
+  generator: {
+    filename: 'ocr/[name]-[hash][ext]',
+  },
  test: [
    /tesseract\.js\/dist\/worker\.min\.js$/,
    /tesseract\.js\/dist\/worker\.min\.js.map$/,
    /tesseract\.js-core\/tesseract-core\.wasm$/,
    /tesseract\.js-core\/tesseract-core\.wasm.js$/,
  ],
-  use: {
-    loader: 'file-loader',
-    options: {
-      name: 'ocr/[name]-[hash].[ext]',
-    },
-  },
+  type: 'asset/resource',
 };
--- a/config/webpack/shared.js
+++ b/config/webpack/shared.js
@ -1,108 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const webpack = require('webpack');
-const { basename, dirname, join, relative, resolve } = require('path');
-const { sync } = require('glob');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const AssetsManifestPlugin = require('webpack-assets-manifest');
-const extname = require('path-complete-extname');
-const { env, settings, themes, output } = require('./configuration');
-const rules = require('./rules');
-const localePackPaths = require('./generateLocalePacks');
-
-const extensionGlob = `**/*{${settings.extensions.join(',')}}*`;
-const entryPath = join(settings.source_path, settings.source_entry_path);
-const packPaths = sync(join(entryPath, extensionGlob));
-
-module.exports = {
-  entry: Object.assign(
-    packPaths.reduce((map, entry) => {
-      const localMap = map;
-      const namespace = relative(join(entryPath), dirname(entry));
-      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry);
-      return localMap;
-    }, {}),
-    localePackPaths.reduce((map, entry) => {
-      const localMap = map;
-      localMap[basename(entry, extname(entry, extname(entry)))] = resolve(entry);
-      return localMap;
-    }, {}),
-    Object.keys(themes).reduce((themePaths, name) => {
-      themePaths[name] = resolve(join(settings.source_path, themes[name]));
-      return themePaths;
-    }, {}),
-  ),
-
-  output: {
-    filename: 'js/[name]-[chunkhash].js',
-    chunkFilename: 'js/[name]-[chunkhash].chunk.js',
-    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
-    hashFunction: 'sha256',
-    path: output.path,
-    publicPath: output.publicPath,
-  },
-
-  optimization: {
-    runtimeChunk: {
-      name: 'common',
-    },
-    splitChunks: {
-      cacheGroups: {
-        default: false,
-        vendors: false,
-        common: {
-          name: 'common',
-          chunks: 'all',
-          minChunks: 2,
-          minSize: 0,
-          test: /^(?!.*[\\\/]node_modules[\\\/]react-intl[\\\/]).+$/,
-        },
-      },
-    },
-    occurrenceOrder: true,
-  },
-
-  module: {
-    rules: Object.keys(rules).map(key => rules[key]),
-  },
-
-  plugins: [
-    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
-    new webpack.NormalModuleReplacementPlugin(
-      /^history\//, (resource) => {
-        // temporary fix for https://github.com/ReactTraining/react-router/issues/5576
-        // to reduce bundle size
-        resource.request = resource.request.replace(/^history/, 'history/es');
-      },
-    ),
-    new MiniCssExtractPlugin({
-      filename: 'css/[name]-[contenthash:8].css',
-      chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
-    }),
-    new AssetsManifestPlugin({
-      integrity: true,
-      integrityHashes: ['sha256'],
-      entrypoints: true,
-      writeToDisk: true,
-      publicPath: true,
-    }),
-  ],
-
-  resolve: {
-    extensions: settings.extensions,
-    modules: [
-      resolve(settings.source_path),
-      'node_modules',
-    ],
-  },
-
-  resolveLoader: {
-    modules: ['node_modules'],
-  },
-
-  node: {
-    // Called by http-link-header in an API we never use, increases
-    // bundle size unnecessarily
-    Buffer: false,
-  },
-};
--- a/config/webpack/tests.js
+++ b/config/webpack/tests.js
@ -1,8 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { merge } = require('webpack-merge');
-const sharedConfig = require('./shared');
-
-module.exports = merge(sharedConfig, {
-  mode: 'development',
-});
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@ -0,0 +1,14 @@
+const { existsSync } = require('fs');
+const { resolve } = require('path');
+const { env } = require('shakapacker');
+const baseConfig = require('./environments/base');
+
+function getWebpackConfig() {
+  const { nodeEnv } = env;
+  const path = resolve(__dirname, 'environments', `${nodeEnv}.js`);
+  const enviromentConfig = existsSync(path) ? require(path) : baseConfig;
+
+  return enviromentConfig;
+}
+
+module.exports = getWebpackConfig();
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@ -1,55 +1,31 @@
-# 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: app/javascript
-  source_entry_path: packs
+  source_entry_path: /
  public_root_path: public
  public_output_path: packs
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: false
+  cache_path: tmp/webpacker
+  webpack_compile_output: true

-  # Additional paths webpack should lookup modules
+  # Location for manifest.json, defaults to {public_output_path}/manifest.json if unset
+  # manifest_path: public/packs/manifest.json
+
+  # 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

-  # Extract and emit a css file
-  extract_css: true
+  # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
+  webpack_loader: 'babel'

-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
+  # Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
+  ensure_consistent_versioning: false

 development:
  <<: *default
-
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
@ -57,23 +33,39 @@ development:
    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: true
-    overlay: true
+    # If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
+    # that you add style-loader to your project dependencies.
+    #
+    # If you want to instead deliver CSS via <link> with the mini-extract-css-plugin, set inline_css to false.
+    # In that case, style-loader is not needed as a dependency.
+    #
+    # mini-extract-css-plugin is a required dependency in both cases.
+    inline_css: false
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      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
-    use_local_ip: false
-    quiet: false
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: "all"
+    pretty: true
    headers:
      'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
+    static:
+      watch:
+        ignored: '**/node_modules/**'

 test:
  <<: *default
-
  # CircleCI precompiles packs prior to running the tests.
  # Also avoids race conditions in parallel_tests.
  compile: false
--- a/package.json
+++ b/package.json
@ -6,8 +6,8 @@
  },
  "scripts": {
    "postversion": "git push --tags",
-    "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/webpack",
-    "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpack",
+    "build:development": "cross-env RAILS_ENV=development NODE_ENV=development ./bin/webpacker",
+    "build:production": "cross-env RAILS_ENV=production NODE_ENV=production ./bin/webpacker",
    "manage:translations": "node ./config/webpack/translationRunner.js",
    "start": "node ./streaming/index.js",
    "test": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:jest",
@ -33,10 +33,10 @@
    "@babel/runtime": "^7.19.0",
    "@gamestdio/websocket": "^0.3.2",
    "@github/webauthn-json": "^0.5.7",
-    "@rails/ujs": "^6.1.6",
+    "@rails/ujs": "^6.1.7",
    "array-includes": "^3.1.5",
    "arrow-key-navigation": "^1.2.0",
-    "autoprefixer": "^9.8.8",
+    "autoprefixer": "^10.4.8",
    "axios": "^0.27.2",
    "babel-loader": "^8.2.5",
    "babel-plugin-lodash": "^3.3.4",
@ -47,10 +47,10 @@
    "classnames": "^2.3.1",
    "cocoon-js-vanilla": "^1.3.0",
    "color-blend": "^3.0.1",
-    "compression-webpack-plugin": "^6.1.1",
+    "compression-webpack-plugin": "^10.0.0",
    "cross-env": "^7.0.3",
-    "css-loader": "^5.2.7",
-    "cssnano": "^4.1.11",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
    "detect-passive-events": "^2.0.3",
    "dotenv": "^16.0.2",
    "emoji-mart": "npm:emoji-mart-lazyload",
@ -58,14 +58,12 @@
    "escape-html": "^1.0.3",
    "exif-js": "^2.3.0",
    "express": "^4.18.1",
-    "file-loader": "^6.2.0",
    "font-awesome": "^4.7.0",
    "fuzzysort": "^1.9.0",
    "glob": "^8.0.3",
    "history": "^4.10.1",
    "http-link-header": "^1.0.5",
    "immutable": "^4.1.0",
-    "imports-loader": "^1.2.0",
    "intersection-observer": "^0.12.2",
    "intl": "^1.2.5",
    "intl-messageformat": "^2.2.0",
@ -76,7 +74,7 @@
    "lodash": "^4.17.21",
    "mark-loader": "^0.1.6",
    "marky": "^1.2.5",
-    "mini-css-extract-plugin": "^1.6.2",
+    "mini-css-extract-plugin": "^2.6.1",
    "mkdirp": "^1.0.4",
    "npmlog": "^6.0.2",
    "object-assign": "^4.1.1",
@ -85,7 +83,7 @@
    "path-complete-extname": "^1.0.0",
    "pg": "^8.5.0",
    "postcss": "^8.4.16",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^6.2.1",
    "postcss-object-fit-images": "^1.1.2",
    "promise.prototype.finally": "^3.1.3",
    "prop-types": "^15.8.1",
@ -118,21 +116,21 @@
    "requestidlecallback": "^0.3.0",
    "reselect": "^4.1.6",
    "rimraf": "^3.0.2",
-    "sass": "^1.54.8",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.54.9",
+    "sass-loader": "^12.6.0",
+    "shakapacker": "6.5.2",
    "stacktrace-js": "^2.0.2",
    "stringz": "^2.1.0",
    "substring-trie": "^1.0.2",
-    "terser-webpack-plugin": "^4.2.3",
    "tesseract.js": "^2.1.1",
    "throng": "^4.0.0",
    "tiny-queue": "^0.2.1",
    "twitter-text": "3.1.0",
    "uuid": "^8.3.1",
-    "webpack": "^4.46.0",
-    "webpack-assets-manifest": "^4.0.6",
+    "webpack": "^5.74.0",
+    "webpack-assets-manifest": "^5.1.0",
    "webpack-bundle-analyzer": "^4.6.1",
-    "webpack-cli": "^3.3.12",
+    "webpack-cli": "^4.10.0",
    "webpack-merge": "^5.8.0",
    "wicg-inert": "^3.1.2",
    "workbox-expiration": "^6.5.4",
@ -162,7 +160,7 @@
    "react-test-renderer": "^16.14.0",
    "stylelint": "^14.11.0",
    "stylelint-config-standard-scss": "^5.0.0",
-    "webpack-dev-server": "^3.11.3",
+    "webpack-dev-server": "^4.11.0",
    "yargs": "^17.5.1"
  },
  "resolutions": {
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,7 +1,6 @@
-module.exports = ({ env }) => ({
+module.exports = () => ({
  plugins: {
    autoprefixer: {},
    'postcss-object-fit-images': {},
-    cssnano: env === 'production' ? {} : false,
  },
 });
--- a/yarn.lock
+++ b/yarn.lock