Webpack upgrade

webpack from 4 to 5

Gulp

Webpack

Rollup

  • better Tree Shaking
  • compile cache
  • without Node.js Polyfills
  • chunkIds, moduleIds hash
  • SplitChunk size
  • Module Federation
    module-federation-examples

4-> 5 different

upgrade pain points

  • plugin detail diff
  • Node.js Polyfills
  • npm link issue
  • dev-server cli diff

next steps

  • create base config and other configs, use it by webpack-merge
  • npm link cache cancel

1

webpack-merge

  • compress image/svg/style in production mode
  • adjust chunk size

2

compress  size

3

implement in others projects

Thank You!

Questions?

webpack 4 to 5

By jaokuohsuan

webpack 4 to 5

  • 605