This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

webpack5

This release focuses on the following:

  • Improve build performance with persistent caching.
  • Use better algorithms and defaults to improve long-term caching.
  • Improved bundle size with better tree shaking and code generation.
  • Clean up weird internal constructs while implementing functionality in V4 without introducing any major changes.
  • Prepare for future functionality by introducing significant changes that will allow us to use V5 for as long as possible.

download

  • npm i webpack@next webpack-cli -D

Automatically remove Node.js Polyfills

Early on, The goal of WebPack was to allow most Node.js modules to run in the browser, but the module landscape has changed and many module uses are now written primarily for front-end purposes. Webpack <= 4 comes with polyfills for many Node.js core modules, which are automatically applied once a module uses any core modules (i.e., crypto modules).

Although this makes it easy to use modules written for Node.js, it adds these huge polyfills to packages. In many cases, these polyfills are unnecessary.

Webpack 5 automatically stops populating these core modules and focuses on modules that are compatible with the front end.

The migration:

  • Try to use front-end compatible modules whenever possible.
  • You can manually add a polyfill for the Node.js core module. The error message will indicate how to achieve this goal.

Chunk and module ID

New algorithms for long-term caching have been added. These are enabled by default in production mode.

chunkIds: "deterministic", moduleIds: "deterministic"

Chunk ID

You don’t have to use import(/* webpackChunkName: “name” */ “module”) to name chunks in the development environment, but production is still necessary

Webpack has a chunk naming convention that is no longer named after id(0, 1, 2)

Tree Shaking

  1. Webpack can now handle tree shaking for nested modules
// inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from './inner';
export { inner };

// user.js
import * as module from './module';
console.log(module.inner.a);
Copy the code

In a production environment, the b exposed by the inner module is removed

  1. Webpack is now capable of multiple module previous relationships
import { something } from './something';

function usingSomething() {
  return something;
}

export function test() {
  return usingSomething();
}
Copy the code

When “sideEffects”: false is set, if the test method is not used, not only test will be removed, but also “./something” will be removed.

  1. Webpack can now handle tree shaking for Commonjs

Output

Webpack 4 can only output ES5 code by default

Webpack 5 starts with a new property output.ecmaVersion, which generates ES5 and ES6 / ES2015 code.

Such as: the output ecmaVersion: 2015

SplitChunk

// webpack4
minSize: 30000;
Copy the code
// webpack5
minSize: {
  javascript: 30000.style: 50000,}Copy the code

Caching

// Configure the cache
cache: {
  // Disk storage
  type: "filesystem".buildDependencies: {
    // The cache is invalid when the configuration is changed
    config: [__filename]
  }
}
Copy the code

The cache is stored in node_modules/.cache/webpack

Monitor output file

Previously, WebPack always exported all files on the first build, but only modified files were updated when monitoring a rebuild.

This update will find the output file on the first build to see if it has changed, so it can decide whether to output the entire file.

The default value

  • entry: "./src/index.js
  • output.path: path.resolve(__dirname, "dist")
  • output.filename: "[name].js"