Upgrade from webpack v1 to v4

Upgrade from webpack v1 to v4

Added webpack bundle visual reports (courtesy of webpack-bundle-analyzer)

set WEBPACK_REPORT=1&&npm start

• router-app:
  • Webpack report: 5.77MB -> 452.15MB
  • gitter.im production: 77KB -> 57.2KB
• router-chat:
  • Webpack report: 6.21MB -> 665.24MB
  • gitter.im production: 108KB -> 89.2KB
• vendor:
  • Webpack report: 1.22MB -> 1.77MB
  • gitter.im production: 142KB -> 174KB

Before	After
index.html stats.json	index.html

Previous

• router-app:
  • Webpack report: 5.77MB -> 427KB
  • gitter.im production: 77KB -> 53.4KB
• router-chat:
  • Webpack report: 6.21MB -> 662KB
  • gitter.im production: 108KB -> 88.6KB
• vendor:
  • Webpack report: 1.22MB -> 2.75MB
  • gitter.im production: 142KB -> 290KB

Before	After
index.html stats.json	index.html

Also upgraded the styleguide to webpack v4: https://gitlab.com/gitlab-org/gitter/styleguide/-/merge_requests/25

Dev notes

npm run gulp -- clientapp:compile:webpack

• MR where GitLab upgraded to webpack v4, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17218

---

• https://webpack.js.org/plugins/split-chunks-plugin/
• https://github.com/webpack/webpack/blob/master/examples/many-pages/README.md

Using a function for webpack splitChunks.cacheGroups.{cacheGroup}.test

• https://github.com/webpack/webpack/blob/052d50d500a9b5cdcdedf4444b267eb89435930f/lib/optimize/SplitChunksPlugin.js#L286-L321

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    maxInitialRequests: 4,
    cacheGroups: {
      default: false,
      vendor: {
        name: 'vendor',
        chunks: 'all',
        // Minimum number of chunks that must share a module before splitting
        minChunks: 2,
        // `d3` is only used by `@gitterhq/cal-heatmap` so let's put it in the specific archive chunk
        test(module, chunks) {
          if (module.nameForCondition) {
            return /[\\/]node_modules[\\/](?!d3)/.test(module.nameForCondition())
          }
        }
      }
    }
  }
},

Todo

• Make sure vendor chunks work
• Make sure ./utils/webpack and commons.js is still being included
  • Now part of a defaults.chunk.js
• Make sure it works with production and development modes
• Can we get rid of any polyfills because we are using @babel/preset-env now? See commons.js
  • No, Babel covers syntax type stuff vs Browser APIs
• Use webpack-manifest.json in the future to for the bootScript in hbs-helpers.js and sub-resources.js
  • See how GitLab does it
    • https://gitlab.com/gitlab-org/gitlab-ce/blob/dd26a9addc5dd654e3c8eecb58216f1f4449cfc1/lib/gitlab/webpack/manifest.rb
    • https://gitlab.com/gitlab-org/gitlab-ce/blob/dd26a9addc5dd654e3c8eecb58216f1f4449cfc1/app/helpers/webpack_helper.rb
    • https://gitlab.com/gitlab-org/gitlab-ce/blob/327eb9a881871755be3222334856ea883e884276/config/webpack.config.js
  • How can we read webpack-manifest.json if it isn't persisted to disk in development?
    • https://github.com/webpack/webpack-dev-middleware#server-side-rendering
• Audit vendor chunk
  • Can these modules be more localized to the certain page/chunk they are used in? If something is only used in one chunk, then only put it in that chunk, etc
  • d3
  • lodash, https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1336
  • moment.js
    • Verify, we are only including certain languages, https://gitlab.com/gitlab-org/gitter/webapp/blob/8025bda1dd268243358955110bdf018a55d79393/public/js/webpack.config.js#L128-131
• Make sure other webpack configs are working
  • public\js\webpack-mobile-native.config.js
    • I removed this config because we can combine it with the main config and just copy over the necessary files that we need
  • modules\service-worker\webpack.config.js
• It seems like the bootScript parameter here should be jsRoot instead of root to match the hbs-helper
  • Verify by building Android/iOS assets and looking at the output/android/www/mobile/embedded-chat.html
  • root and jsRoot are different options. root is used in cdnUrlGenerator

---

Fix https://gitlab.com/gitlab-org/gitter/webapp/issues/2078