Road to webpack 4 (week 20–21)

2017/08/14–2017/08/27

Tobias Koppers
Aug 28, 2017 · 3 min read

Planning

The last weeks I did some planning and experimentation with items planned for webpack 4. While webpack 3 didn’t include many breaking changes, webpack 4 probably will.

Goals

These are the main driving goals for webpack 4:

  • New CSS workflow
  • Support for async script tags
  • Performance improvements
  • Optimization for ESM without side-effects
  • Support typings for plugins/hooks
  • Add a type to modules (JS, ESM, WASM, CSS)
    This requires a lot of refactoring in the Asset Generation.
  • Refactoring of the Runtime code
    This allows different runtime code for different module type
  • Pushing to array instead of pure JSONP
    This allows to load chunks in any order on bootstrap.
  • and more minor breaking changes

TODOs

WASM Support

This allows to use WASM modules with webpack in a way that make them feel very like ESM.

  • Asset Generation for WASM
  • Runtime code for WASM
  • WASM Parser to extract imports/exports

CSS

This changes the default way for packaging CSS with webpack. Instead of embedding them into JS, webpack will generate CSS assets by default.

  • Asset Generation for CSS
  • Runtime code for CSS
  • CSS Parser to extract imports/exports

Async script tag

This allows to load webpack script with <script async> for better bootstrap performance.

  • Block entry point execution until all required chunks are ready
  • Options to define position to runtime code as it can be in any entry chunk now

Performance improvements

This will improve build performance.

  • Enforce best performance for plugin hooks
  • Refactor more Arrays to Sets

Optimization for ESM without side-effects

This will improve tree shaking of libraries without side-effects.

  • Add support for "side-effects": false in package.json
  • Reconnect dependencies when side-effect-free modules are involved
  • Remove dependencies to side-effect-free modules when they are not used

Support typings for plugins/hooks

This will allow to write types of plugin hook to improve plugin development.

  • Create backward-compatibility layer to support old code
  • Refactor webpack and internal plugins to use new API

Stable Version

It probably take a while until all these changes are implemented. In this time webpack 3 will be supported as stable version and continue to get bug fixes until webpack 4 is stable enough.

Timeframe

I guess these changes take at least 2 months.


webpack

The official Medium publication for the webpack open source project!

Tobias Koppers

Written by

webpack

webpack

The official Medium publication for the webpack open source project!