Webpack 5の新しい特性

このリリースでは、次の点に焦点を当てます.

永続キャッシュにより構築性能を向上する.

.

より良いアルゴリズムとデフォルト値を使用して長期キャッシュを改善する.

より良い木揺れとコード生成によりバンドルパッケージのサイズを改善する.

は、重大な変更を導入することなく、v 4で機能を実現するとともに、奇妙な状態にある内部構造を消去する.

.

は、v 5.

をできるだけ長く使用できるように、重大な変更を導入することによって、将来の機能に備える.
ダウンロード

npm i webpack@next webpack-cli -D

Node.js Polyfillsの自動削除
初期、webpackの目標はブラウザで多くのnode.jsモジュールを実行することを許可することだったが、モジュール構造が変化し、多くのモジュールの用途は現在、主にフロントエンドの目的のために作成されている.Webpack<=4にはnode.jsコアモジュールのpolyfillが多数付属しており、モジュールがコアモジュール(cryptoモジュール)を使用すると自動的に適用されます.
これによりnode.js用に作成されたモジュールが容易になりますが、これらの巨大なpolyfillがパッケージに追加されます.多くの場合、これらのpolyfillは必要ありません.
Webpack 5は、これらのコアモジュールの充填を自動的に停止し、フロントエンドと互換性のあるモジュールに集中します.
移行:

フロントエンドと互換性のあるモジュールの使用を可能な限り試みます.

node.jsコアモジュールにpolyfillを手動で追加できます.エラーメッセージは、ターゲットの実装方法を示します.

ChunkとモジュールID
長期キャッシュに使用する新しいアルゴリズムが追加されました.これらの機能は、本番モードでは既定でオンになっています.chunkIds: "deterministic", moduleIds: "deterministic"
Chunk ID import(/* webpackChunkName: "name" */ "module")を使用して開発環境にchunkの名前を付ける必要はありません.生産環境は必要です.
Webpack内部にはchunkネーミングルールがあり、id(0,1,2)ネーミングではありません
Tree Shaking

webpackは、ネストモジュールに対するtree shaking

を処理できるようになった.

// 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);

生産環境では、innerモジュールが露出したbが削除されます.

webpackは現在、複数のモジュールの前の関係

を可能にする.

import {
      something } from './something';

function usingSomething() {
     
  return something;
}

export function test() {
     
  return usingSomething();
}

"sideEffects": falseが設定されている場合、testメソッドが使用されていないことが発見されると、testだけでなく、"./something"も削除される

webpackは、Commonjsに対するtree shaking

を処理できるようになりました.
Output
Webpack 4はデフォルトでES 5コードしか出力できません
Webpack 5は、ES 5およびES 6/ES 2015コードを生成できる属性output.ecmaVersionの追加を開始する.
例えば:output.ecmaVersion: 2015SplitChunk

// webpack4
minSize: 30000;

// webpack5
minSize: {
     
  javascript: 30000,
  style: 50000,
}

Caching

//     
cache: {
     
  //     
  type: "filesystem",
  buildDependencies: {
     
    //       ，    
    config: [__filename]
  }
}

キャッシュはnode_modules/.cache/webpackに格納されます
出力ファイルの監視
以前はwebpackは常に最初の構築時にすべてのファイルを出力していましたが、再構築を監視すると変更したファイルのみが更新されます.
今回の更新では、初回構築時に出力ファイルが変化しているかどうかを確認し、すべてのファイルを出力するかどうかを決定します.
デフォルト

entry: "./src/index.js

output.path: path.resolve(__dirname, "dist")

output.filename: "[name].js"