Skip to content
Snippets Groups Projects

Upgrade to Webpack 4

    • Closed Issue created by Mike Greiling @mikegreiling

    Webpack 4 offers several improvements including:

    • much faster build times
    • a declarative syntax for automatic chunk splitting
    • <script async> support
    • better tree shaking for "pure modules" without side effects

    Beta announcement: https://medium.com/webpack/webpack-4-beta-try-it-today-6b1d27d7d7e2
    Release announcement: https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

    Priority: Urgent

    Right now, since gitlab-org/gitlab-ce#41341, we have no CommonsChunk definitions outside of our vendor'd libraries which are loaded on all pages. Any code that is not linked in main.js or commons/index.js which exists in more than one route is currently duplicated. This is an inefficient use of browser caching and contributes needlessly to bloated omnibus package size (by repeating some modules/libraries in multiple bundles).

    To Do:

    • Update Dependencies - Nearly all of them have not been updated to support webpack 4, except for karma-webpack. We'll need to either contribute a fix upstream, or update our CI config to prevent yarn check from failing our builds due to mismatching peerDependencies.
      Edit: karma-webpack is now compatible :tada:

    • Clean Up Config - Many webpack config options have changed or been made redundant. We need to adjust the way our development/production mode defaults are defined. This will likely result in a much more simplified webpack config file.

      Reference to new config options and their defaults: https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a

    • Fix Karma Tests - Karma is failing in webpack 4 due to the way we had been taking advantage of some undocumented ESM behavior in webpack 2/3. We are no longer able to use jasmine's spyOn with modules which have been imported with import * as Foo from 'foo';. Modules will also now fail if you attempt to reference this within a module context (which we do in a few specs).

      Related issue: gitlab-org/gitlab-ce#30998

    • Adjust Rails Integration - We need to update our webpack-rails integration to understand ChunkGroups when generating script tags. Entry points now correspond to collections of split chunks rather than a single file. All of the must be loaded together.

    • Verify That Multiple Entry Points Can Coexist - The new behavior of the webpack runtime doesn't seem to expect multiple entry points to be run on a single page. We need to make sure these will work when we do things like conditionally add the raven bundle as an entry point. If this does not work as expected, we will need to find another way to accomplish this.
      Edit: After some testing, this appears to work just fine as long as we use a single runtime chunk for all entry points on the page (see optimization.runtimeChunk).

    • Ensure Nothing Has Broken - Audit the new development/production mode defaults in webpack 4, ensure sourcemaps and breakpoints still work, ensure our webpack-dev-server workflow still works, check our uglify output.

    Follow Ups:

    Edited by Mike Greiling

    Designs

      Child items ...

      2. Activity

      Please register or sign in to reply