Upgrade to webpacker/webpack 4 and Babel 7 (#6664)

Upgraded to webpacker 4/webpack 4 and Babel 7
2020-03-17 08:20:36 -04:00 · 2020-03-17 08:20:36 -04:00 · ccf7e6e5bf
commit ccf7e6e5bf
parent 8f768a0cbc
55 changed files with 2865 additions and 1312 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,21 +0,0 @@
-{
-  "presets": [
-    ["env", { "modules": false, "targets": { "browsers": "> 1%", "uglify": true }, "useBuiltIns": true }],
-    "preact",
-  ],
-
-  "env": {
-    "test": {
-      "plugins": [
-        "transform-es2015-modules-commonjs",
-      ]
-    }
-  },
-
-  "plugins": [
-    "syntax-dynamic-import",
-    "transform-object-rest-spread",
-    ["transform-class-properties", { "spec": true }],
-    [ "transform-react-jsx", { "pragma": "h" }]
-  ]
-}
--- a/.travis.yml
+++ b/.travis.yml
@ -64,7 +64,7 @@ script:
  - './cc-test-reporter sum-coverage coverage/codeclimate.*.json'
  - './cc-test-reporter upload-coverage'
  - 'bundle exec bundle-audit check --update --ignore CVE-2015-9284'
-  - yarn build-storybook
+  # - yarn build-storybook
  - bundle exec rails runner -e production 'puts "App booted successfully"'
 deploy:
  provider: heroku
--- a/2
+++ b/2
@ -104,7 +104,7 @@ gem "typhoeus", "~> 1.3.1" # Used with Elasticsearch to support http keep-alive
 gem "uglifier", "~> 4.2" # Uglifier minifies JavaScript files
 gem "ulid", "~> 1.2" # Universally Unique Lexicographically Sortable Identifier implementation for Ruby
 gem "validate_url", "~> 1.0" # Library for validating urls in Rails
-gem "webpacker", "~> 3.5" # Use webpack to manage app-like JavaScript modules in Rails
+gem "webpacker", "~> 4.2.2" # Use webpack to manage app-like JavaScript modules in Rails

 group :development do
  gem "better_errors", "~> 2.6" # Provides a better error page for Rails and other Rack apps
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -842,7 +842,7 @@ GEM
      addressable (>= 2.3.6)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (3.5.5)
+    webpacker (4.2.2)
      activesupport (>= 4.2)
      rack-proxy (>= 0.6.1)
      railties (>= 4.2)
@ -1004,7 +1004,7 @@ DEPENDENCIES
  web-console (~> 3.7)
  webdrivers (~> 4.2)
  webmock (~> 3.8)
-  webpacker (~> 3.5)
+  webpacker (~> 4.2.2)
  yard (~> 0.9.24)
  yard-activerecord (~> 0.0.16)
  yard-activesupport-concern (~> 0.0.1)
--- a/app/javascript/articles/stories/Article.stories.jsx
+++ b/app/javascript/articles/stories/Article.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 import { withKnobs, object, text, boolean } from '@storybook/addon-knobs/react';
 import { action } from '@storybook/addon-actions';
 import { Article } from '..';
@ -9,11 +8,11 @@ import {
  articleWithSnippetResult,
  articleWithReadingTimeGreaterThan1,
  articleWithReactions,
-  videoArticle,
+  // videoArticle,
  articleWithComments,
-  podcastArticle,
-  podcastEpisodeArticle,
-  userArticle,
+  // podcastArticle,
+  // podcastEpisodeArticle,
+  // userArticle,
  assetPath,
 } from '../__tests__/utilities/articleUtilities';
 import { articleDecorator } from './articleDecorator';
@ -30,159 +29,201 @@ const commonProps = {
  bookmarkClick: action('Saved/unsaved article'),
 };

-storiesOf('App Components/Article/Standard', module)
-  .addDecorator(withKnobs)
-  .addDecorator(articleDecorator)
-  .add('Default', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', article)}
-      currentTag={text('currentTag', 'javascript')}
-    />
-  ))
-  .add('With Organization', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithOrganization)}
-      currentTag={text('currentTag', 'javascript')}
-    />
-  ))
-  .add('Wth Flare Tag', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', article)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Wth Snippet Result', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithSnippetResult)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Wth Reading Time', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithReadingTimeGreaterThan1)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Wth Reactions', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithReactions)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('With Comments', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', articleWithComments)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Is on Reading List', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', true)}
-      article={object('article', articleWithComments)}
-      currentTag={text('currentTag')}
-    />
-  ));
+export default {
+  title: 'App Components/Article/Standard',
+  component: Article,
+  decorators: [withKnobs, articleDecorator],
+};

-storiesOf('App Components/Article/Video', module)
-  .addDecorator(withKnobs)
-  .addDecorator(articleDecorator)
-  .add('Default', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', videoArticle)}
-      currentTag={text('currentTag', 'javascript')}
-    />
-  ))
-  .add('Video Article and Flare Tag', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', videoArticle)}
-      currentTag={text('currentTag')}
-    />
-  ));
+export const DefaultArticle = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', article)}
+    currentTag={text('currentTag', 'javascript')}
+  />
+);

-storiesOf('App Components/Article/Podcast', module)
-  .addDecorator(withKnobs)
-  .addDecorator(articleDecorator)
-  .add('Default', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', podcastArticle)}
-      currentTag={text('currentTag')}
-    />
-  ))
-  .add('Podcast Episode', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      isBookmarked={boolean('isBookmarked', false)}
-      article={object('article', podcastEpisodeArticle)}
-      currentTag={text('currentTag')}
-    />
-  ));
+DefaultArticle.story = {
+  name: 'default',
+};

-storiesOf('App Components/Article/User', module)
-  .addDecorator(withKnobs)
-  .addDecorator(articleDecorator)
-  .add('Default', () => (
-    <Article
-      {...commonProps}
-      reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
-      commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
-      videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
-      article={object('article', userArticle)}
-    />
-  ));
+export const WithOrganization = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithOrganization)}
+    currentTag={text('currentTag', 'javascript')}
+  />
+);
+
+WithOrganization.story = {
+  name: 'with organization',
+};
+
+export const WithFlareTag = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', article)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithFlareTag.story = {
+  name: 'with flare tag',
+};
+
+export const WithSnippetResult = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithSnippetResult)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithSnippetResult.story = {
+  name: 'with snippet result',
+};
+
+export const WithReadingTime = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithReadingTimeGreaterThan1)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithReadingTime.story = {
+  name: 'with reading time',
+};
+
+export const WithReactions = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithReactions)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithReactions.story = {
+  name: 'with reactions',
+};
+
+export const WithComments = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', false)}
+    article={object('article', articleWithComments)}
+    currentTag={text('currentTag')}
+  />
+);
+
+WithComments.story = {
+  name: 'with comments',
+};
+
+export const OnReadingList = () => (
+  <Article
+    {...commonProps}
+    reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+    commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+    videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+    isBookmarked={boolean('isBookmarked', true)}
+    article={object('article', articleWithComments)}
+    currentTag={text('currentTag')}
+  />
+);
+
+OnReadingList.story = {
+  name: 'on reading list',
+};
+
+// storiesOf('App Components/Article/Video', module)
+//   .addDecorator(withKnobs)
+//   .addDecorator(articleDecorator)
+//   .add('Default', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', videoArticle)}
+//       currentTag={text('currentTag', 'javascript')}
+//     />
+//   ))
+//   .add('Video Article and Flare Tag', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', videoArticle)}
+//       currentTag={text('currentTag')}
+//     />
+//   ));
+
+// storiesOf('App Components/Article/Podcast', module)
+//   .addDecorator(withKnobs)
+//   .addDecorator(articleDecorator)
+//   .add('Default', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', podcastArticle)}
+//       currentTag={text('currentTag')}
+//     />
+//   ))
+//   .add('Podcast Episode', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       isBookmarked={boolean('isBookmarked', false)}
+//       article={object('article', podcastEpisodeArticle)}
+//       currentTag={text('currentTag')}
+//     />
+//   ));
+
+// storiesOf('App Components/Article/User', module)
+//   .addDecorator(withKnobs)
+//   .addDecorator(articleDecorator)
+//   .add('Default', () => (
+//     <Article
+//       {...commonProps}
+//       reactionsIcon={text('reactionsIcon', ICONS.REACTIONS_ICON)}
+//       commentsIcon={text('commentsIcon', ICONS.COMMENTS_ICON)}
+//       videoIcon={text('videoIcon', ICONS.VIDEO_ICON)}
+//       article={object('article', userArticle)}
+//     />
+//   ));
--- a/app/javascript/articles/stories/FeaturedArticle.stories.jsx
+++ b/app/javascript/articles/stories/FeaturedArticle.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 import { withKnobs, object, text, boolean } from '@storybook/addon-knobs/react';
 import { action } from '@storybook/addon-actions';
 import {
--- a/app/javascript/articles/stories/LoadingArticle.stories.jsx
+++ b/app/javascript/articles/stories/LoadingArticle.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
 import { LoadingArticle } from '..';
 import '../../../assets/stylesheets/articles.scss';
 import { articleDecorator } from './articleDecorator';
--- a/app/javascript/chat/tests/snapshots/channelDetails.test.jsx.snap
+++ b/app/javascript/chat/tests/snapshots/channelDetails.test.jsx.snap
@ -195,7 +195,7 @@ preact-render-spy (1 nodes)
         
        <button
          type="button"
-          onClick={[Function value]}
+          onClick={[Function anonymous]}
          data-content="searched_userid3"
        >
          Invite
--- a/app/javascript/chat/tests/snapshots/githubRepo.test.jsx.snap
+++ b/app/javascript/chat/tests/snapshots/githubRepo.test.jsx.snap
@ -14,7 +14,7 @@ preact-render-spy (1 nodes)
        href="https://github.com/username/repositoryname/tree/master/Camera"
        data-api-url="https://api.github.com/repos/username/repositoryname/contents/Camera?ref=master"
        data-path="Camera"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
      >
        <span
          role="img"
@ -30,7 +30,7 @@ preact-render-spy (1 nodes)
        href="https://github.com/username/repositoryname/tree/master/Environment"
        data-api-url="https://api.github.com/repos/username/repositoryname/contents/Environment?ref=master"
        data-path="Environment"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
      >
        <span
          role="img"
@ -46,7 +46,7 @@ preact-render-spy (1 nodes)
        href="https://github.com/username/repositoryname/tree/master/Interactables"
        data-api-url="https://api.github.com/repos/username/repositoryname/contents/Interactables?ref=master"
        data-path="Interactables"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
      >
        <span
          role="img"
@ -62,7 +62,7 @@ preact-render-spy (1 nodes)
        href="https://github.com/username/repositoryname/tree/master/Level%20Design"
        data-api-url="https://api.github.com/repos/username/repositoryname/contents/Level%20Design?ref=master"
        data-path="Level Design"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
      >
        Level Design
      </a>
@ -72,7 +72,7 @@ preact-render-spy (1 nodes)
        href="https://github.com/username/repositoryname/tree/master/Player"
        data-api-url="https://api.github.com/repos/username/repositoryname/contents/Player?ref=master"
        data-path="Player"
-        onClick={[Function value]}
+        onClick={[Function anonymous]}
      >
        Player
      </a>
--- a/app/javascript/designSystem/stories/avatarsAndLogos.stories.jsx
+++ b/app/javascript/designSystem/stories/avatarsAndLogos.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

--- a/app/javascript/designSystem/stories/boxes.stories.jsx
+++ b/app/javascript/designSystem/stories/boxes.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';
 import { defaultChildrenPropTypes } from '../../src/components/common-prop-types';
--- a/app/javascript/designSystem/stories/buttons.stories.jsx
+++ b/app/javascript/designSystem/stories/buttons.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

--- a/app/javascript/designSystem/stories/dropdowns.stories.jsx
+++ b/app/javascript/designSystem/stories/dropdowns.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

@ -20,8 +19,7 @@ storiesOf('Components/HTML/Dropdowns', module)
      <p>
        If you need to utilize entire dropdown area and you have to get rid of
        default padding, please use modifier class
-        <code>crayons-dropdown--padding-0</code>
-        .
+        <code>crayons-dropdown--padding-0</code>.
      </p>
      <p>
        FYI: Dropdowns use “Box” component as background, with Level 3
--- a/app/javascript/designSystem/stories/formElements.stories.jsx
+++ b/app/javascript/designSystem/stories/formElements.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';
 import { defaultChildrenPropTypes } from '../../src/components/common-prop-types';
--- a/app/javascript/designSystem/stories/indicators.stories.jsx
+++ b/app/javascript/designSystem/stories/indicators.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

--- a/app/javascript/designSystem/stories/mainNavigation.stories.jsx
+++ b/app/javascript/designSystem/stories/mainNavigation.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

--- a/app/javascript/designSystem/stories/modals.stories.jsx
+++ b/app/javascript/designSystem/stories/modals.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

@ -21,8 +20,7 @@ storiesOf('Components/HTML/Modals', module)
      <p>
        If you need to utilize entire modal area and you have to get rid of
        default padding, please use modifier class
-        <code>crayons-modal--padding-0</code>
-        .
+        <code>crayons-modal--padding-0</code>.
      </p>
      <p>
        FYI: Modals use “Box” component as background, with Level 3 elevation.
--- a/app/javascript/designSystem/stories/navigationTabs.stories.jsx
+++ b/app/javascript/designSystem/stories/navigationTabs.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

--- a/app/javascript/designSystem/stories/notices.stories.jsx
+++ b/app/javascript/designSystem/stories/notices.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';

--- a/app/javascript/designSystem/stories/typography.stories.jsx
+++ b/app/javascript/designSystem/stories/typography.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import './designSystem.scss';
 import './typography.scss';
--- a/app/javascript/listings/tests/snapshots/singleListing.test.jsx.snap
+++ b/app/javascript/listings/tests/snapshots/singleListing.test.jsx.snap
@ -22,7 +22,7 @@ preact-render-spy (1 nodes)
          type="button"
          class="dropdown-btn"
          aria-label="Toggle dropdown menu"
-          onClick={[Function value]}
+          onClick={[Function anonymous]}
        >
          <img
            src=""
--- a/app/javascript/podcasts/stories/PodcastEpisode.stories.jsx
+++ b/app/javascript/podcasts/stories/PodcastEpisode.stories.jsx
@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
+
 import { PodcastEpisode } from '../PodcastEpisode';
 import { podcastArticle } from '../../articles/__tests__/utilities/articleUtilities';

--- a/app/javascript/podcasts/stories/TodaysPodcasts.stories.jsx
+++ b/app/javascript/podcasts/stories/TodaysPodcasts.stories.jsx
@ -1,5 +1,4 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';

 import '../../../assets/stylesheets/articles.scss';
 import { TodaysPodcasts } from '../TodaysPodcasts';
--- a/app/javascript/src/components/Search/stories/SearchForm.stories.jsx
+++ b/app/javascript/src/components/Search/stories/SearchForm.stories.jsx
@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { storiesOf } from '@storybook/react';
+
 import { action } from '@storybook/addon-actions';
 import { SearchForm } from '..';

--- a/app/views/articles/_actions.html.erb
+++ b/app/views/articles/_actions.html.erb
@ -47,7 +47,7 @@
            <button for="subscribe_notifications" id="notification-subscription-label_only_author_comments" class="notification-subscription-label" data-payload="only_author_comments">
              Post Author Comments <span class="selected-emoji">✅</span>
            </button>
-            <%= javascript_pack_tag "notificationSubscriptionHandler", defer: true %>
+            <%= javascript_packs_with_chunks_tag "notificationSubscriptionHandler", defer: true %>
          </div>
        <% end %>
        <div class="dropdown-link-row">
--- a/app/views/articles/edit.html.erb
+++ b/app/views/articles/edit.html.erb
@ -28,6 +28,5 @@
 <% end %>

 <%= render "shared/webcomponents_loader_script" %>
-<%= javascript_pack_tag "clipboardCopy", defer: true %>
-<%= javascript_pack_tag "articleForm", defer: true %>
+<%= javascript_packs_with_chunks_tag "clipboardCopy", "articleForm", defer: true %>
 <%= render "articles/v2_form", article: @article, organizations: @organizations, version: @version %>
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@ -23,7 +23,7 @@
  <meta name="twitter:card" content="summary_large_image">
  <%= auto_discovery_link_tag(:rss, "#{app_protocol_and_domain}/feed", title: "#{ApplicationConfig['COMMUNITY_NAME']} RSS Feed") %>
 <% end %>
-<%= javascript_pack_tag "homePage", defer: true %>
+<%= javascript_packs_with_chunks_tag "homePage", defer: true %>

 <% cache(cache_key_heroku_slug("main-stories-index-#{params}-#{user_signed_in?}"), expires_in: 90.seconds) do %>
  <div class="home" id="index-container"
--- a/app/views/articles/new.html.erb
+++ b/app/views/articles/new.html.erb
@ -2,8 +2,7 @@

 <% if user_signed_in? %>
  <%= render "shared/webcomponents_loader_script" %>
-  <%= javascript_pack_tag "clipboardCopy", defer: true %>
-  <%= javascript_pack_tag "articleForm", defer: true %>
+  <%= javascript_packs_with_chunks_tag "clipboardCopy", "articleForm", defer: true %>
  <%= render "articles/v2_form", article: @article, organizations: @organizations, version: @version %>
 <% else %>
  <% @new_article_not_logged_in = true %>
--- a/app/views/articles/show.html.erb
+++ b/app/views/articles/show.html.erb
@ -1,7 +1,7 @@
 <% title @article.title %>

 <%= render "shared/webcomponents_loader_script" %>
-<%= javascript_pack_tag "clipboardCopy", defer: true %>
+<%= javascript_packs_with_chunks_tag "clipboardCopy", "webShare", defer: true %>

 <% cache("content-related-optional-scripts-#{@article.id}-#{@article.updated_at}", expires_in: 30.hours) do %>
  <% if @article.processed_html.include? "ltag_gist-liquid-tag" %>
@ -227,5 +227,3 @@
    <%= TweetTag.script.html_safe %>
  </script>
 <% end %>
-
-<%= javascript_pack_tag "webShare", defer: true %>
--- a/app/views/articles/stats.html.erb
+++ b/app/views/articles/stats.html.erb
@ -17,4 +17,4 @@
  <%= render "shared/stats" %>
 </div>

-<%= javascript_pack_tag "analyticsArticle", defer: true %>
+<%= javascript_packs_with_chunks_tag "analyticsArticle", defer: true %>
--- a/app/views/articles/tags/_sidebar_additional.html.erb
+++ b/app/views/articles/tags/_sidebar_additional.html.erb
@ -17,7 +17,7 @@
      </div>
    <% end %>
    <% if user_signed_in? %>
-      <%= javascript_pack_tag "sidebarWidget", defer: true %>
+      <%= javascript_packs_with_chunks_tag "sidebarWidget", defer: true %>
      <div id="sidebarWidget__pack" data-tag-info="<%= @tag_model.attributes.slice("id", "text_color_hex", "bg_color_hex", "name").to_json %>">
      </div>
    <% else %>
--- a/app/views/chat_channels/index.html.erb
+++ b/app/views/chat_channels/index.html.erb
@ -6,7 +6,7 @@
 <%= csrf_meta_tags %>

 <% if user_signed_in? %>
-  <%= javascript_pack_tag "Chat", defer: true %>
+  <%= javascript_packs_with_chunks_tag "Chat", defer: true %>
  <div class="chat-page-wrapper">
    <div
      id="chat"
--- a/app/views/classified_listings/_form.html.erb
+++ b/app/views/classified_listings/_form.html.erb
@ -45,7 +45,9 @@
        <% end %>
      </div>
    </div>
-      <%= javascript_pack_tag "listingForm", defer: true %>
+      <% unless @organizations.present? %>
+        <%= javascript_packs_with_chunks_tag "listingForm", defer: true %>
+      <% end %>
    <div class="field">
      <%= form.label "location", "Location (If applicable for events, etc.)" %>
      <%= form.text_field "location", placeholder: "32 characters max, plain text" %>
@ -81,7 +83,7 @@
        has <span id="org-credits-number"><%= @organizations.first.credits.unspent.size %></span> credits -
          <a id="org-credits-purchase-link" target="_blank" rel="noopener noreferrer" href="/credits/purchase?organization_id=<%= @organizations.first.id %>" data-no-instant>Buy More</a>
        </div>
-        <%= javascript_pack_tag "orgCreditsSelector", defer: true %>
+        <%= javascript_packs_with_chunks_tag "listingForm", "orgCreditsSelector", defer: true %>
      <% end %>
    </div>
  </div>
--- a/app/views/classified_listings/dashboard.html.erb
+++ b/app/views/classified_listings/dashboard.html.erb
@ -15,4 +15,4 @@
        only: %i[id name slug unspent_credits_count]
      ) %>" >
 </div>
-<%= javascript_pack_tag "listingDashboard", defer: true %>
+<%= javascript_packs_with_chunks_tag "listingDashboard", defer: true %>
--- a/app/views/classified_listings/index.html.erb
+++ b/app/views/classified_listings/index.html.erb
@ -32,15 +32,15 @@
      only: %i[title processed_html tag_list category id user_id slug contact_via_connect location],
      include: {
        author: { only: %i[username name], methods: %i[username profile_image_90] }
-      },
+      }
    ) %>"
    data-allcategories="<%= ClassifiedListing.categories_for_display.to_json %>"
    <% if @displayed_classified_listing %>
      data-displayedlisting="<%= @displayed_classified_listing.to_json(
-        only: %i[title processed_html tag_list category id user_id slug contact_via_connect location],
-        include: {
-          author: { only: %i[username name], methods: %i[username profile_image_90] }
-        },
+          only: %i[title processed_html tag_list category id user_id slug contact_via_connect location],
+          include: {
+            author: { only: %i[username name], methods: %i[username profile_image_90] }
+          },
      ) %> "
    <% end %>
  >
@ -54,4 +54,4 @@
  </div>
 </div>

-<%= javascript_pack_tag "listings", defer: true %>
+<%= javascript_packs_with_chunks_tag "listings", defer: true %>
--- a/app/views/dashboards/pro.html.erb
+++ b/app/views/dashboards/pro.html.erb
@ -25,4 +25,4 @@
  <%= render "shared/stats" %>
 </div>

-<%= javascript_pack_tag "analyticsDashboard", defer: true %>
+<%= javascript_packs_with_chunks_tag "analyticsDashboard", defer: true %>
--- a/app/views/layouts/internal.html.erb
+++ b/app/views/layouts/internal.html.erb
@ -12,9 +12,7 @@
  <title><%= controller_name.titleize %></title>

  <!-- StimulusJS -->
-  <%= javascript_pack_tag "manifest", defer: true %>
-  <%= javascript_pack_tag "vendor", defer: true %>
-  <%= javascript_pack_tag "internal", defer: true %>
+  <%= javascript_packs_with_chunks_tag "internal", defer: true %>

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

--- a/app/views/moderations/index.html.erb
+++ b/app/views/moderations/index.html.erb
@ -25,13 +25,13 @@
      <% plucked_article_ids = Article.cached_tagged_with(@tag).pluck(:id) if @tag %>
      <div class="mod-index-hero-data-pod">
        <div class="mod-index-hero-data-pod-number">
-          <%= number_with_delimiter(@tag ? Comment.where(commentable_id: plucked_article_ids ).where("created_at > ?", 7.days.ago).size : Comment.where("created_at > ?", 7.days.ago).size) %>
+          <%= number_with_delimiter(@tag ? Comment.where(commentable_id: plucked_article_ids).where("created_at > ?", 7.days.ago).size : Comment.where("created_at > ?", 7.days.ago).size) %>
        </div>
        Comments This Week
      </div>
      <div class="mod-index-hero-data-pod">
        <div class="mod-index-hero-data-pod-number">
-          <%= number_with_delimiter(@tag ? Reaction.where(reactable_id: plucked_article_ids ).where("created_at > ?", 7.days.ago).size : Reaction.where("created_at > ?", 7.days.ago).size)  %>
+          <%= number_with_delimiter(@tag ? Reaction.where(reactable_id: plucked_article_ids).where("created_at > ?", 7.days.ago).size : Reaction.where("created_at > ?", 7.days.ago).size) %>
        </div>
        Reactions This Week
      </div>
@ -86,7 +86,7 @@
    <div class="body">
      <p>We periodically award some DEV members with heightened privileges to help moderate the community.</p>
      <p>Email <a href="mailto:<%= SiteConfig.default_site_email %>"><%= SiteConfig.default_site_email %></a> if you'd like to be considered right away.</p>
-      <% if !user_signed_in? %>
+      <% unless user_signed_in? %>
        <p><em>P.S. You are not currently signed in.</em></p>
      <% end %>
    </div>
--- a/app/views/onboardings/show.html.erb
+++ b/app/views/onboardings/show.html.erb
@ -14,7 +14,7 @@
 </style>

 <div id="onboarding-container">
-  <%= javascript_pack_tag "Onboarding", defer: true %>
+  <%= javascript_packs_with_chunks_tag "Onboarding", defer: true %>
 </div>

 <div id="terms" style="display: none;">
--- a/app/views/pages/live.html.erb
+++ b/app/views/pages/live.html.erb
@ -1,5 +1,5 @@
 <% if user_signed_in? %>
-  <%= javascript_pack_tag "Chat", defer: true %>
+  <%= javascript_packs_with_chunks_tag "Chat", defer: true %>
 <% end %>
 <% title "DEV Live 📡👩‍💻👨‍💻👩‍💻👨‍💻" %>
 <link rel="canonical" href="https://dev.to/live" />
--- a/app/views/reading_list_items/index.html.erb
+++ b/app/views/reading_list_items/index.html.erb
@ -21,4 +21,4 @@
  <div class="item-list-container" id="reading-list" data-algolia-key="<%= @secured_algolia_key %>" data-view="<%= @view %>">
  </div>
 </div>
-<%= javascript_pack_tag "readingList", defer: true %>
+<%= javascript_packs_with_chunks_tag "readingList", defer: true %>
--- a/app/views/shell/_top.html.erb
+++ b/app/views/shell/_top.html.erb
@ -11,21 +11,20 @@
      <meta name="algolia-public-key" content="<%= ALGOLIASEARCH_PUBLIC_SEARCH_ONLY_KEY %>">
      <meta name="environment" content="<%= Rails.env %>">
      <%= render "layouts/styles" %>
-      <style> 
-        .home { 
-          overflow: hidden; 
-          position: relative; 
-          margin: auto; 
-          max-width: 1250px;  
-        } 
+      <style>
+        .home {
+          overflow: hidden;
+          position: relative;
+          margin: auto;
+          max-width: 1250px;
+        }
      </style>
-      <%= javascript_pack_tag "manifest", defer: true %>
-      <%= javascript_pack_tag "vendor", defer: true %>
-      <%= javascript_pack_tag "Search", defer: true %>
+      <% unless user_signed_in? %>
+        <%= javascript_packs_with_chunks_tag "Search", defer: true %>
+      <% end %>
      <%= javascript_include_tag "base", defer: true %>
      <% if user_signed_in? %>
-        <%= javascript_pack_tag "onboardingRedirectCheck", defer: true %>
-        <%= javascript_pack_tag "contentDisplayPolicy", defer: true %>
+        <%= javascript_packs_with_chunks_tag "Search", "onboardingRedirectCheck", "contentDisplayPolicy", defer: true %>
      <% end %>
      <%= yield(:page_meta) %>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -61,4 +60,4 @@
        loading...
      </div>
    <!-- End Top Shell -->
-  <% end %>
+  <% end %>
--- a/app/views/tags/edit.html.erb
+++ b/app/views/tags/edit.html.erb
@ -1,6 +1,6 @@
 <% title "Edit #{@tag.name}" %>

-<%= javascript_pack_tag "colorPicker", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPicker", defer: true %>

 <style>
  .widget header {
--- a/app/views/users/_integrations.html.erb
+++ b/app/views/users/_integrations.html.erb
@ -4,7 +4,7 @@
    <div class="github-repos loading-repos">
    </div>
  </div>
-  <%= javascript_pack_tag "githubRepos", defer: true %>
+  <%= javascript_packs_with_chunks_tag "githubRepos", defer: true %>
 <% end %>

 <hr />
@ -14,7 +14,7 @@
    <h2>Connected to Stackbit <sup>beta</sup><img src="<%= asset_path("checkmark-green.svg") %>" /></h2>
    <p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/dashboard">Go To Your Stackbit Dashboard</a></strong></p>
    <p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/create?ref=devto">Create New Stackbit Site</a></strong></p>
-    
+
  <% else %>
    <h2>Connect to Stackbit <sup>beta</sup></h2>
    <p>Automatically generate a self-hosted static blog feed from your DEV posts.</p>
@ -36,4 +36,4 @@

    <%= submit_tag "SUBMIT", class: "cta" %>
  <% end %>
-<% end %>
+<% end %>
--- a/app/views/users/_org_admin.html.erb
+++ b/app/views/users/_org_admin.html.erb
@ -1,7 +1,6 @@
-<%= javascript_pack_tag "colorPreview", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPreview", "clipboardCopy", defer: true %>

 <%= render "shared/webcomponents_loader_script" %>
-<%= javascript_pack_tag "clipboardCopy", defer: true %>

 <style>
  .primary-sticky-nav-author, .primary-sticky-nav-author-element {
--- a/app/views/users/_org_non_member.html.erb
+++ b/app/views/users/_org_non_member.html.erb
@ -1,4 +1,4 @@
-<%= javascript_pack_tag "colorPicker", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPicker", defer: true %>

 <h3>Join An Organization</h3>
 <h5>Do you have the secret code?</h5>
--- a/app/views/users/_profile.html.erb
+++ b/app/views/users/_profile.html.erb
@ -1,4 +1,4 @@
-<%= javascript_pack_tag "colorPreview", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPreview", defer: true %>

 <% unless @user.identities.exists?(provider: 'github') %>
  <div class="field">
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@ -153,7 +153,7 @@
      <div id="user-profile-dropdownmenu" class="profile-dropdownmenu">
        <button id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="block-button" type="button">Block @<%= @user.username %></button>
        <% if user_signed_in? %>
-          <%= javascript_pack_tag "profileDropdown", defer: true %>
+          <%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
        <% end %>
        <a href="/report-abuse?url=https://dev.to/<%= @user.username %>">Report Abuse</a>
      </div>
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,38 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        targets: {
+          browsers: '> 1%',
+        },
+        useBuiltIns: 'entry',
+        corejs: { version: 3, proposals: false },
+      },
+    ],
+    'preact',
+  ],
+  env: {
+    test: {
+      plugins: ['@babel/plugin-transform-modules-commonjs'],
+    },
+  },
+  plugins: [
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-object-rest-spread',
+    [
+      '@babel/plugin-proposal-class-properties',
+      {
+        spec: true,
+      },
+    ],
+    [
+      '@babel/plugin-transform-react-jsx',
+      {
+        pragma: 'h',
+      },
+    ],
+  ],
+};
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@ -1,25 +1,43 @@
+/* global require module */
 const { environment } = require('@rails/webpacker');
 const erb = require('./loaders/erb');
-const webpack = require('webpack');

-environment.plugins.append(
-  'CommonsChunkVendor',
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'vendor',
-    minChunks: module => {
-      // this assumes your vendor imports exist in the node_modules directory
-      return module.context && module.context.indexOf('node_modules') !== -1;
+/*
+The customizations below are to create the vendor chunk. The vendor chunk is no longer consumed like it was in webpacker 3.
+There is no longer one vendor bundle. It gets code split based on what webpacker packs need. All the object spreading e.g. `...config.optimization` is to keep
+the existing configuration and only override/add what is necessary.
+
+The cache groups section is the default cache groups in webpack 4. See https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks.
+It does not appear to be the default with webpacker 4.
+*/
+environment.splitChunks(config => {
+  return {
+    ...config,
+    optimization: {
+      ...config.optimization,
+      splitChunks: {
+        ...config.optimization.splitChunks,
+        cacheGroups: {
+          vendor: {
+            test: /node_modules/,
+            chunks: 'initial',
+            name: 'vendor',
+            enforce: true,
+          },
+          default: {
+            minChunks: 2,
+            priority: -20,
+            reuseExistingChunk: true,
+          },
+        },
+      },
    },
-  }),
-);
+  };
+});

-environment.plugins.append(
-  'CommonsChunkManifest',
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'manifest',
-    minChunks: Infinity,
-  }),
-);
+// We don't want babel-loader running on the node_modules folder.
+environment.loaders.delete('nodeModules');

 environment.loaders.append('erb', erb);
+
 module.exports = environment;
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@ -3,26 +3,47 @@
 default: &default
  source_path: app/javascript
  source_entry_path: packs
+  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: ['app/assets']

-  # Reload manifest.json on all requests so we reload latest compiled packs
+  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
  extensions:
-    - .coffee
+    - .mjs
    - .erb
    - .js
    - .jsx
-    - .ts
-    - .vue
    - .sass
    - .scss
    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
    - .png
    - .svg
    - .gif
@ -33,11 +54,28 @@ 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
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
+    https: false
    host: localhost
    port: 3035
+    public: localhost:3035
    hmr: false
-    https: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    pretty: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: '**/node_modules/**'

 test:
  <<: *default
@ -52,5 +90,8 @@ 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
--- a/docs/frontend/preact.md
+++ b/docs/frontend/preact.md
@ -10,8 +10,8 @@ API.
 Preact components are packaged using [Webpacker](/frontend/webpacker) and the
 Preact code is located in `app/javascript`.

-The components are mounted when needed, look for `javascript_pack_tag` in the
-view pages inside `app/views`.
+Preact components get loaded via webpacker's helper function
+`javascript_packs_with_chunks_tag`.

 ## PropTypes

--- a/docs/frontend/webpacker.md
+++ b/docs/frontend/webpacker.md
@ -6,21 +6,37 @@ title: Webpacker

 DEV has two Javascript codebases.

-One contains plain Javascript, you can read about it [in its own guide](/frontend/plain-js).
+One contains plain Javascript, you can read about it
+[in its own guide](/frontend/plain-js).

-The other one is managed by [Webpacker](https://github.com/rails/webpacker), and it's located inside `/app/javascripts`, written using ES6+.
+The other one is managed by [Webpacker](https://github.com/rails/webpacker), and
+it's located inside `/app/javascripts`, written using ES6+.

-Currently, it's mainly used for Preact components, served via `webpack` which is integrated into the Rails app using `Webpacker`.
+Currently, it's mainly used for Preact components, served via `webpack` which is
+integrated into the Rails app using `Webpacker`.

-There is a packs directory `/app/javascript/packs` where you can create
-new "pack" files. Pack files are initializers for Webpacker.
+There is a packs directory `/app/javascript/packs` where you can create new
+"pack" files. Pack files are initializers for Webpacker.

-Since DEV is not a Single Page Application (SPA), Preact components are mounted as needed by including the pack file in the view files.
+Since DEV is not a Single Page Application (SPA), Preact components are mounted
+as needed by including the pack file in the view files.

 For example:

 ```erb
-<%= javascript_pack_tag "webShare", defer: true %>
+<%= javascript_packs_with_chunks_tag "webShare", defer: true %>
 ```

-The include statement corresponds to the pack `app/javascripts/packs/webShare.js`
+The include statement corresponds to the pack
+`app/javascripts/packs/webShare.js`
+
+If you have more than one webpacker pack on the page, you need to include it in
+the same `javascript_packs_with_chunks_tag` call. The reason being is it avoids
+loading split chunks multiple times.
+
+```erb
+<%= javascript_packs_with_chunks_tag "webShare", "someOtherPack", defer: true %>
+```
+
+For more information in regards to `javascript_packs_with_chunks_tag`, see
+https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb
--- a/package.json
+++ b/package.json
@ -75,6 +75,7 @@
    "@storybook/addon-links": "3.4.12",
    "@storybook/addons": "3.4.12",
    "@storybook/react": "3.4.12",
+    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^23.4.2",
    "eslint": "^5.16.0",
@ -99,16 +100,18 @@
    "preact-render-to-json": "^3.6.6",
    "prettier": "^1.19.1",
    "redoc-cli": "0.9.6",
-    "webpack-dev-server": "^2.11.3"
+    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-transform-react-jsx": "^7.0.0",
    "@github/clipboard-copy-element": "^1.1.2",
-    "@rails/webpacker": "^3.5.5",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-preact": "^1.1.0",
+    "@rails/webpacker": "4.2.2",
+    "babel-preset-preact": "^2.0.0",
    "chart.js": "^2.9.3",
    "clipboard-polyfill": "^2.8.6",
    "codemirror": "^5.52.0",
+    "core-js": "3",
    "focus-visible": "^5.0.2",
    "honeybadger-js": "2.1.3",
    "intersection-observer": "^0.7.0",
--- a/yarn.lock
+++ b/yarn.lock