Webpack 5 リリース (2020-10-10)

Webpack 4 は 2018 年 2 月にリリースされました。それ以来、破壊的な変更なしに多くの機能を出荷してきました。私たちは、人々が破壊的な変更を伴う大きな変更を嫌っていることを知っています。特に、webpack は通常年に 2 回しか触れず、残りの時間は「問題なく動作する」だけです。しかし、破壊的な変更なしに機能を出荷することには、コストもかかります。API やアーキテクチャの大幅な改善を行うことができません。

そのため、時々、困難が積み重なり、すべてをめちゃくちゃにしないために、破壊的な変更を余儀なくされることがあります。それが新しいメジャーバージョンのタイミングです。そのため、webpack 5 には、これらのアーキテクチャの改善と、それなしには実装できなかった機能が含まれています。

メジャーバージョンは、デフォルトの一部を見直し、その間に登場した提案や仕様に合わせるチャンスでもありました。

本日（2020-10-10）webpack 5.0.0 がリリースされましたが、これは完了した、バグがない、あるいは機能が完全に揃っているという意味ではありません。webpack 4 と同様に、問題の修正と機能の追加により開発を継続します。今後数日間で多くのバグ修正が行われるでしょう。機能は後から追加されます。

よくある質問

このリリースは何を意味するのか？

つまり、破壊的な変更が完了したということです。アーキテクチャをレベルアップし、将来の機能（および現在の機能）の基盤を構築するために、多くのリファクタリングが行われました。

いつアップグレードするべきか？

それは状況によります。アップグレードが失敗し、2回目または3回目の試行が必要になる可能性が高いです。それを受け入れることができる場合は、今すぐアップグレードを試して、webpack、プラグイン、ローダーにフィードバックを提供してください。私たちはそれらの問題を解決することに熱心です。誰かが始めなければならず、あなたはそれから恩恵を受ける最初の一人になるでしょう。

スポンサーシップの更新

Webpack は完全にスポンサーシップに基づいています。他のオープンソースプロジェクトのように、大企業に縛られて（そして資金提供を受けて）いるわけではありません。スポンサーシップからの収益の 99% は、貢献度に基づいて貢献者とメンテナーに分配されます。私たちは、webpack をより良くするためにお金を投資することを信じています。

しかし、パンデミックが発生しており、企業はもはやスポンサーシップにそれほど積極的ではありません。Webpack も（他の多くの企業や人々のように）これらの状況に苦しんでいます。

私たちは貢献者にふさわしい金額を支払うことができませんでしたが、現在では利用できる資金が半分しかないため、より深刻な削減を行う必要があります。状況が改善するまで、貢献者とメンテナーには各月の最初の 10 日間のみ支払います。残りの日は、ボランティアで働いたり、雇用主から給料をもらったり、他のことに取り組んだり、数日休暇を取ったりすることができます。これにより、最初の 10 日間に行った作業に対してより同等の金額を支払うことができます。

最大の「ありがとう」は、過去 3 年間 webpack に多大なスポンサーシップを提供してくれたtrivagoに送ります。残念ながら、Covid-19 の影響を大きく受けたため、今年はスポンサーシップを継続することができません。他の企業が立ち上がり、これらの（巨大な）足跡をたどってくれることを願っています。

すべてのスポンサーに感謝します。

全体的な方向性

このリリースは以下に焦点を当てています。

永続的なキャッシュによるビルドパフォーマンスの向上。
より優れたアルゴリズムとデフォルトによる長期キャッシュの改善。
より優れたツリーシェイキングとコード生成によるバンドルサイズの削減。
Web プラットフォームとの互換性の向上。
破壊的な変更を導入せずに v4 の機能を実装する際に、奇妙な状態になった内部構造のクリーンアップ。
破壊的な変更を今導入することで将来の機能に備え、可能な限り長く v5 を使い続けられるようにします。

移行ガイド

移行ガイドについてはこちらを参照してください

大きな変更点：削除

非推奨項目の削除

v4 で非推奨になった項目はすべて削除されました。

移行: webpack 4 のビルドで非推奨の警告が出力されないことを確認してください。

以下に、v4 で削除されたが、非推奨の警告が表示されなかったものがいくつかあります。

IgnorePlugin と BannerPlugin は、オブジェクト、文字列、または関数のいずれかである引数を 1 つだけ渡す必要があります。

非推奨コード

新しい非推奨には、参照しやすいように非推奨コードが含まれています。

構文の非推奨

require.include は非推奨となり、使用するとデフォルトで警告が発せられます。

動作は、Rule.parser.requireInclude を allowed、deprecated、または disabled に変更できます。

Node.js の自動ポリフィル削除

初期の頃、webpack の目的は、ほとんどの Node.js モジュールをブラウザで実行できるようにすることでしたが、モジュールの状況が変化し、多くのモジュールは現在、主にフロントエンド向けに記述されています。Webpack <= 4 には、Node.js のコアモジュールの多くに対するポリフィルが付属しており、モジュールがコアモジュール（例えば、crypto モジュール）を使用すると、自動的に適用されます。

これにより、Node.js 向けに書かれたモジュールを使いやすくなりますが、これらの巨大なポリフィルがバンドルに追加されます。多くの場合、これらのポリフィルは不要です。

Webpack 5 では、これらのコアモジュールの自動ポリフィルを停止し、フロントエンド互換モジュールに焦点を当てます。私たちの目標は、Node.js コアモジュールが利用できない Web プラットフォームとの互換性を向上させることです。

移行:

可能な限りフロントエンド互換のモジュールを使用してください。
Node.js コアモジュールに対して手動でポリフィルを追加することも可能です。エラーメッセージは、それを実現する方法のヒントを示します。
パッケージの作成者: パッケージをフロントエンド互換にするには、package.json の browser フィールドを使用します。ブラウザ向けの代替実装/依存関係を提供します。

大きな変更点: 長期キャッシュ

決定性チャンク、モジュール ID、エクスポート名

長期キャッシュのために新しいアルゴリズムが追加されました。これらはプロダクションモードでデフォルトで有効になっています。

chunkIds: "deterministic" moduleIds: "deterministic" mangleExports: "deterministic"

このアルゴリズムは、モジュールとチャンクに短い（3桁または5桁）の数値 ID を、エクスポートに短い（2文字）名前を決定論的な方法で割り当てます。これはバンドルサイズと長期キャッシュの間のトレードオフです。

moduleIds/chunkIds/mangleExports: false は、デフォルトの動作を無効にし、プラグインを介してカスタムアルゴリズムを提供できます。webpack 4 では、カスタムプラグインなしの moduleIds/chunkIds: false でビルドが成功しましたが、webpack 5 ではカスタムプラグインを提供する必要があります。

移行: chunkIds、moduleIds、mangleExports のデフォルト値を使用するのが最適です。また、古いデフォルト chunkIds: "size", moduleIds: "size", mangleExports: "size" を選択することもできます。これにより、より小さなバンドルが生成されますが、キャッシュの無効化がより頻繁になります。

注: webpack 4 では、ハッシュ化されたモジュール ID によって gzip のパフォーマンスが低下しました。これはモジュールの順序の変更に関連しており、修正されました。

注: webpack 5 では、deterministic ID はプロダクションモードでデフォルトで有効になっています。

実際のコンテンツハッシュ

webpack 5 では、[contenthash] を使用する場合、ファイルのコンテンツの実際のハッシュを使用するようになりました。以前は、内部構造のハッシュを「のみ」使用していました。コメントのみが変更されたり、変数の名前が変更されたりした場合、長期キャッシュにプラスの影響を与える可能性があります。これらの変更は、最小化後には表示されません。

大きな変更点: 開発サポート

名前付きチャンク ID

開発モードでデフォルトで有効になっている新しい名前付きチャンク ID アルゴリズムは、チャンク (およびファイル名) に人間が読める名前を付けます。モジュール ID は、context に相対的なパスによって決定されます。チャンク ID は、チャンクのコンテンツによって決定されます。

そのため、デバッグのために import(/* webpackChunkName: "name" */ "module") を使用する必要はなくなりました。ただし、本番環境のファイル名を制御したい場合は、引き続き意味があります。

本番環境で chunkIds: "named" を使用することもできますが、モジュール名に関する機密情報を誤って公開しないように注意してください。

移行: 開発時にファイル名が変更されるのが気に入らない場合は、chunkIds: "natural" を渡して、古い数値モードを使用できます。

モジュールフェデレーション

Webpack 5 では、複数の webpack ビルドが連携できるようにする「モジュールフェデレーション」と呼ばれる新しい機能が追加されました。ランタイムの観点からは、複数のビルドからのモジュールは、巨大な接続されたモジュールグラフのように動作します。開発者の観点からは、指定されたリモートビルドからモジュールをインポートし、最小限の制限で使用できます。

詳細については、この別ガイドをご覧ください。

大きな変更点: 新しい Web プラットフォーム機能

JSON モジュール

JSON モジュールは提案に準拠するようになり、デフォルト以外のエクスポートを使用すると警告を発するようになりました。厳密な ECMAScript モジュールからインポートする場合、JSON モジュールには名前付きエクスポートはなくなりました。

移行: デフォルトのエクスポートを使用してください。

デフォルトのエクスポートを使用する場合でも、使用されていないプロパティは optimization.usedExports 最適化によって削除され、プロパティは optimization.mangleExports 最適化によってマングルされます。

JSON のようなファイル (例えば、toml、yaml、json5 など) をインポートするために、Rule.parser.parse でカスタム JSON パーサーを指定することが可能です。

import.meta

import.meta.webpackHot は module.hot のエイリアスであり、厳密な ESM でも利用可能です。
import.meta.webpack は webpack のメジャーバージョンを数値で表したものです。
import.meta.url は現在のファイルの file: URL です (__filename に似ていますが、ファイル URL として)

アセットモジュール

Webpack 5 では、アセットを表すモジュールをネイティブでサポートするようになりました。これらのモジュールは、出力フォルダーにファイルを生成するか、JavaScript バンドルに DataURI を挿入します。いずれにしても、操作する URL を提供します。

これらは複数の方法で使用できます。

import url from "./image.png" と、そのようなインポートに一致する場合に module.rules で type: "asset" を設定する。(古い方法)
new URL("./image.png", import.meta.url) (新しい方法)

「新しい方法」の構文は、バンドラーなしでもコードを実行できるようにするために選択されました。この構文は、ブラウザのネイティブ ECMAScript モジュールでも利用できます。

ネイティブワーカーのサポート

アセットに new URL を new Worker/new SharedWorker/navigator.serviceWorker.register と組み合わせると、webpack は自動的に Web ワーカー用の新しいエントリーポイントを作成します。

new Worker(new URL("./worker.js", import.meta.url))

この構文は、バンドラーなしでもコードを実行できるようにするために選択されました。この構文は、ブラウザのネイティブ ECMAScript モジュールでも利用できます。

URI

Webpack 5 は、リクエストのプロトコルの処理をサポートしています。

data: がサポートされています。Base64 または生のエンコーディングがサポートされています。MIME タイプは、module.rules でローダーとモジュールタイプにマッピングできます。例: import x from "data:text/javascript,export default 42"
file: がサポートされています。
http(s): がサポートされていますが、new webpack.experiments.schemesHttp(s)UriPlugin() を介してオプトインする必要があります。
- デフォルトでは、「web」をターゲットにしている場合、これらの URI は外部リソースへのリクエストになります (外部化されます)。

リクエストのフラグメントがサポートされています。例: ./file.js#fragment

非同期モジュール

Webpack 5 は、いわゆる「非同期モジュール」をサポートしています。これらは同期的に評価されませんが、非同期で代わりに Promise ベースです。

import を介してインポートすると、自動的に処理され、追加の構文は不要で、違いはほとんど気づきません。

require() を介してインポートすると、エクスポートを解決する Promise が返されます。

webpack では、非同期モジュールを使用する複数の方法があります。

非同期外部
新しい仕様での WebAssembly モジュール
トップレベル await を使用している ECMAScript モジュール

外部化

Webpack 5 では、より多くのアプリケーションをカバーするために、追加の外部タイプが追加されました。

promise: Promise に評価される式。外部モジュールは非同期モジュールであり、解決された値がモジュールエクスポートとして使用されます。

import: ネイティブの import() を使用して、指定されたリクエストをロードします。外部モジュールは非同期モジュールです。

module: まだ実装されていませんが、import x from "..." を介してモジュールをロードする予定です。

script: <script> タグを介して URL をロードし、グローバル変数 (およびオプションでそのプロパティ) からエクスポートを取得します。外部モジュールは非同期モジュールです。

大きな変更点: 新しい Node.js エコシステム機能

解決

package.json の exports フィールドと imports フィールドがサポートされるようになりました。

Yarn PnP がネイティブでサポートされています。

詳細については、パッケージのエクスポートを参照してください。

大きな変更点: 開発エクスペリエンス

ターゲットの改善

Webpack 5 では、ターゲットのリストを渡すことができ、ターゲットのバージョンもサポートしています。

例: target: "node14" target: ["web", "es2020"]

これにより、webpack が次のことを判断するために必要なすべての情報を提供できます。

チャンク読み込みメカニズム、および
アロー関数のようなサポートされている構文

統計

Stats テストのフォーマットが、可読性と冗長性の点で改善されました。デフォルト値が冗長性を抑え、大規模なビルドにも適するように改善されました。

チャンク間の関係は、デフォルトで非表示になりました。これは、stats.chunkRelations で切り替えることができます。
Stats は、files と auxiliaryFiles を区別するようになりました。
Stats は、モジュールとチャンクの ID をデフォルトで非表示にするようになりました。これは、stats.ids で切り替えることができます。
すべてのモジュールのリストは、エントリポイントからの距離でソートされるようになりました。これは、stats.modulesSort で変更できます。
チャンクモジュールのリストは、モジュール名でソートされるようになりました。これは、stats.chunkModulesSort で変更できます。
連結されたモジュール内のネストされたモジュールのリストは、トポロジカルにソートされるようになりました。これは、stats.nestedModulesSort で変更できます。
チャンクとアセットに、チャンク ID のヒントが表示されるようになりました。
アセットとモジュールは、リスト/テーブルではなく、ツリーで表示されるようになります。
一般的な情報は、最後にサマリーとして表示されるようになりました。webpack のバージョン、設定名、および警告/エラーの数が表示されます。
ハッシュはデフォルトで非表示になりました。これは、stats.hash で変更できます。
ビルドのタイムスタンプは、デフォルトで表示されなくなりました。これは、stats.builtAt で有効にできます。サマリーにタイムスタンプが表示されます。
子コンパイルは、デフォルトで表示されなくなりました。これらは、stats.children で表示できます。

進捗状況

CLI の --progress で使用される ProgressPlugin にいくつかの改善が加えられましたが、プラグインとして手動で使用することもできます。

以前は、処理されたモジュールのみをカウントしていました。現在は、entries、dependencies、および modules をカウントできます。これらはすべてデフォルトで表示されるようになりました。

以前は、現在処理中のモジュールが表示されていました。これにより、多くの stderr 出力が発生し、一部のコンソールでパフォーマンスの問題が発生していました。これは現在デフォルトで無効になっています（activeModules オプション）。これにより、コンソールでのスパムの量も減ります。モジュールの構築中の stderr への書き込みは、500ms にスロットルされます。

プロファイリングモードもアップグレードされ、ネストされた進捗メッセージのタイミングが表示されるようになります。これにより、どのプラグインがパフォーマンスの問題を引き起こしているかを把握しやすくなります。

新たに追加された percentBy オプションは、ProgressPlugin に進捗率の計算方法を指示します。

new webpack.ProgressPlugin({ percentBy: 'entries' });

進捗率をより正確にするために、ProgressPlugin は最後に既知の合計モジュール数をキャッシュし、次のビルドでこの値を再利用します。最初のビルドではキャッシュがウォームアップされますが、後続のビルドではこの値が使用および更新されます。

自動的な一意の名前付け

webpack 4 では、複数の webpack ランタイムが同じ HTML ページで競合する可能性がありました。これは、チャンクローディングに同じグローバル変数を使用していたためです。それを修正するために、output.jsonpFunction 設定にカスタム名を指定する必要がありました。

Webpack 5 は、package.json の name からビルドの一意の名前を自動的に推測し、これを output.uniqueName のデフォルトとして使用します。

この値は、競合する可能性のあるすべてのグローバルを一意にするために使用されます。

移行：package.json に一意の名前を指定して、output.jsonpFunction を削除してください。

自動的なパブリックパス

Webpack 5 は、可能な場合に output.publicPath を自動的に決定します。

Typescript の型定義

Webpack 5 は、ソースコードから typescript の型定義を生成し、npm パッケージを介して公開します。

移行：@types/webpack を削除します。名前が異なる場合は、参照を更新してください。

主な変更点：最適化

ネストされたツリーシェイキング

Webpack は、エクスポートのネストされたプロパティへのアクセスを追跡できるようになりました。これにより、名前空間オブジェクトを再エクスポートするときに、ツリーシェイキング（未使用のエクスポートの削除とエクスポートの短縮）を改善できます。

// inner.js
export const a = 1;
export const b = 2;

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

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

この例では、エクスポート b は本番モードで削除できます。

モジュール内ツリーシェイキング

Webpack 4 は、モジュールのエクスポートとインポート間の依存関係を分析しませんでした。Webpack 5 には、本番モードでデフォルトで有効になっている新しいオプション optimization.innerGraph があり、モジュール内のシンボルに対する分析を実行して、エクスポートからインポートへの依存関係を把握します。

このようなモジュールでは、

import { something } from './something';

function usingSomething() {
  return something;
}

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

内部グラフアルゴリズムは、something が test エクスポートが使用された場合にのみ使用されることを把握します。これにより、より多くのエクスポートを未使用としてフラグを立て、バンドルからより多くのコードを省略できます。

"sideEffects": false が設定されている場合、これにより、さらに多くのモジュールを省略できます。この例では、test エクスポートが未使用の場合、./something が省略されます。

未使用のエクスポートに関する情報を取得するには、optimization.usedExports が必要です。副作用のないモジュールを削除するには、optimization.sideEffects が必要です。

次のシンボルを分析できます

関数宣言
クラス宣言
export default （または変数宣言）
- 関数式
- クラス式
- シーケンス式
- /*#__PURE__*/ 式
- ローカル変数
- インポートされたバインディング

フィードバック：この分析に不足しているものが見つかった場合は、問題を報告してください。追加を検討します。

eval() を使用すると、eval されたコードがスコープ内の任意のシンボルを参照する可能性があるため、モジュールのこの最適化が中止されます。

この最適化は、ディープスコープ解析とも呼ばれます。

CommonJs ツリーシェイキング

Webpack は、CommonJs エクスポートと require() 呼び出しの未使用エクスポート分析をオプトアウトしていました。

Webpack 5 は、いくつかの CommonJs 構成のサポートを追加し、未使用の CommonJs エクスポートを削除したり、require() 呼び出しから参照されるエクスポート名を追跡したりできます。

次の構成がサポートされています

exports|this|module.exports.xxx = ...
exports|this|module.exports = require("...") (再エクスポート)
exports|this|module.exports.xxx = require("...").xxx (再エクスポート)
Object.defineProperty(exports|this|module.exports, "xxx", ...)
require("abc").xxx
require("abc").xxx()
ESM からのインポート
ESM の require()
フラグ付きの exportType (非厳密な ESM インポートの特別な処理)
- Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0 })
- exports|this|module.exports.__esModule = true|!0
将来的には、より多くの構成をサポートする予定です。

分析できないコードを検出すると、webpack は中止し、これらのモジュールのエクスポート情報を（パフォーマンス上の理由から）一切追跡しません。

副作用分析

package.json の "sideEffects" フラグを使用すると、モジュールを副作用なしとして手動でフラグを立てることができ、未使用の場合にそれらを削除できます。

Webpack 5 は、ソースコードの静的分析に従って、モジュールを副作用なしとして自動的にフラグを立てることもできます。

ランタイムごとの最適化

Webpack 5 は、ランタイムごとにモジュールを分析および最適化できるようになりました（デフォルトで実行されます）。ランタイムは、多くの場合、エントリポイントと同じです。これにより、本当に必要なエントリポイントでのみエクスポートできます。エントリポイントは、（エントリポイントごとにランタイムを使用している限り）互いに影響しません。

モジュール連結

モジュール連結もランタイムごとに機能し、各ランタイムで異なる連結を可能にします。

モジュール連結は第一級の市民になり、すべてのモジュールと依存関係がそれを実装できるようになりました。当初、webpack 5 は ExternalModules と json モジュールのサポートを追加しましたが、今後さらに追加される可能性が高いです。

一般的なツリーシェイキングの改善

export * が改善され、より多くの情報を追跡し、default エクスポートを未使用としてフラグを立てなくなりました。

export * は、webpack が競合するエクスポートがあると確信している場合に警告を表示するようになります。

import() を使用すると、/* webpackExports: ["abc", "default"] */ マジックコメントを介してモジュールを手動でツリーシェイクできます。

開発環境と本番環境の類似性

開発モードでのビルドパフォーマンスと、両方のモード間の類似性を改善することにより、本番環境のみの問題を回避することとの間で、適切なトレードオフを見つけようとしています。

Webpack 5 は、両方のモードでデフォルトで sideEffects 最適化を有効にします。webpack 4 では、この最適化により、package.json の "sideEffects" フラグが正しくないために、本番環境のみのエラーが発生していました。開発環境でこの最適化を有効にすると、これらの問題をより迅速かつ簡単に発見できます。

多くの場合、開発と本番環境は、ファイルシステムのケースセンシティブが異なる異なる OS で発生するため、webpack 5 は、ケースに関して奇妙な点がある場合に、さらにいくつかの警告/エラーを追加します。

コード生成の改善

Webpack は ASI が発生したことを検出し、セミコロンが挿入されない場合、より短いコードを生成します。Object(...) -> (0, ...)

Webpack は、複数のエクスポートゲッターを単一のランタイム関数呼び出しにマージします。r.d(x, "a", () => a); r.d(x, "b", () => b); -> r.d(x, {a: () => a, b: () => b});

output.environment に追加オプションが追加されました。これにより、webpack によって生成されたランタイムコードに使用できる ECMAScript 機能を指定できます。

通常、このオプションを直接指定するのではなく、代わりに target オプションを使用します。

Webpack 4 は、ES5 コードのみをエミットしていました。Webpack 5 は、ES5 と ES6/ES2015 コードの両方を生成できるようになりました。

最新のブラウザーのみをサポートすると、アロー関数を使用するより短いコードと、export default に TDZ を使用するより仕様に準拠したコード（const 宣言を使用）が生成されます。

`target`オプションの改善

webpack 4 では、target は "web" と "node" (およびその他いくつか) の間のおおまかな選択でした。 webpack 5 では、より多くのオプションが提供されます。

target オプションは、以前よりも生成されるコードに多くの影響を与えるようになりました。

チャンクのロード方法
チャンクの形式
wasm のロード方法
ワーカーにおけるチャンクと wasm のロード方法
使用されるグローバルオブジェクト
publicPath を自動的に決定するかどうか
生成されたコードで使用される ECMAScript の機能/構文
デフォルトで有効になっている externals
いくつかの Node.js 互換レイヤーの動作 (global、__filename、__dirname)
モジュールの解決 (browser フィールド、exports および imports 条件)
一部のローダーは、それに基づいて動作を変更する可能性があります。

これらのいくつかのことについては、"web" と "node" の選択はあまりにも大雑把であり、より多くの情報が必要です。したがって、"node10.13" のように最小バージョンを指定し、ターゲット環境に関するより多くのプロパティを推論できるようにします。

配列で複数のターゲットを組み合わせることも許可されるようになり、webpack はすべてのターゲットの最小プロパティを決定します。配列の使用は、"web" や "node" (バージョン番号なし) のように完全な情報を提供しないターゲットを使用する場合にも役立ちます。例えば、["web", "es2020"] はこれら 2 つの部分的なターゲットを結合します。

環境のプロパティを決定するために browserslist データを使用する "browserslist" というターゲットがあります。このターゲットは、プロジェクトで browserslist の設定が利用可能な場合にもデフォルトで使用されます。そのような設定が利用できない場合は、デフォルトで "web" ターゲットが使用されます。

一部の組み合わせと機能はまだ実装されておらず、エラーが発生します。それらは将来の機能のための準備です。例:

["web", "node"] は、まだ実装されていないユニバーサルチャンクローディングメソッドにつながります。
["web", "node"] + output.module: true は、まだ実装されていないモジュールチャンクローディングメソッドにつながります。
"web" は、http(s): インポートがまだ実装されていない module externals として扱われることにつながります (回避策: externalsPresets: { web: false, webAsync: true }、これは代わりに import() を使用します)。

SplitChunks とモジュールサイズ

モジュールは、単一の数値よりも優れた方法でサイズを表現するようになりました。現在、異なるタイプのサイズがあります。

SplitChunksPlugin は、これらの異なるサイズをどのように処理するかを認識し、minSize と maxSize にそれらを使用します。デフォルトでは、javascript サイズのみが処理されますが、複数の値を渡して管理できるようになりました。

module.exports = {
  optimization: {
    splitChunks: {
      minSize: {
        javascript: 30000,
        webassembly: 50000,
      },
    },
  },
};

サイズには単一の数値を使用することもできます。この場合、webpack はデフォルトのサイズタイプを自動的に使用します。

mini-css-extract-plugin は、サイズタイプとして css/mini-extra を使用し、このサイズタイプをデフォルトのタイプに自動的に追加します。

主な変更点: パフォーマンス

永続的なキャッシュ

ファイルシステムキャッシュが追加されました。これはオプトインであり、次の構成で有効にできます。

module.exports = {
  cache: {
    // 1. Set cache type to filesystem
    type: 'filesystem',

    buildDependencies: {
      // 2. Add your config as buildDependency to get cache invalidation on config change
      config: [__filename],

      // 3. If you have other things the build depends on you can add them here
      // Note that webpack, loaders and all modules referenced from your config are automatically added
    },
  },
};

重要な注意事項

デフォルトでは、webpack は、webpack が内部にある node_modules ディレクトリがパッケージマネージャーによって**のみ**変更されることを想定しています。ハッシュとタイムスタンプは node_modules ではスキップされます。代わりに、パフォーマンス上の理由から、パッケージ名とバージョンのみが使用されます。シンボリックリンク (つまり、npm/yarn link) は、resolve.symlinks: false が指定されていない限り問題ありません (とにかく避けてください)。snapshot.managedPaths: [] を使用してこの最適化をオプトアウトしない限り、node_modules のファイルを直接編集しないでください。 Yarn PnP を使用する場合、webpack は yarn キャッシュが不変であると想定します (通常はそうです)。 snapshot.immutablePaths: [] でこの最適化をオプトアウトできます。

キャッシュは、デフォルトで node_modules/.cache/webpack (node_modules を使用する場合) resp. .yarn/.cache/webpack (Yarn PnP を使用する場合) に保存されます。すべてのプラグインがキャッシュを正しく処理する場合、手動で削除する必要はおそらくありません。

多くの内部プラグインも永続的なキャッシュを使用します。例: SourceMapDevToolPlugin (SourceMap の生成をキャッシュするため) や ProgressPlugin (モジュール数をキャッシュするため)

永続的なキャッシュは、キャッシュへの読み取り/書き込みアクセスを最適化するために、使用状況に応じて複数のキャッシュファイルを自動的に作成します。

デフォルトでは、開発モードではタイムスタンプが、本番モードではファイルハッシュがスナップショットに使用されます。ファイルハッシュを使用すると、CI でも永続的なキャッシュを使用できます。

コンパイラのアイドル状態とクローズ

コンパイラは、使用後にクローズする必要があります。コンパイラは、アイドル状態になり、この状態を離れ、これらの状態のフックを持っています。プラグインは、これらのフックを使用して重要でない作業を行うことができます。(つまり、永続的なキャッシュは、キャッシュをゆっくりとディスクに保存します)。コンパイラのクローズ時 - 残りのすべての作業は、できるだけ早く完了する必要があります。コールバックは、クローズが完了したことを通知します。

プラグインとそのそれぞれの作成者は、一部のユーザーがコンパイラのクローズを忘れる可能性があることを想定する必要があります。したがって、すべての作業は、アイドル状態でも最終的に終了する必要があります。作業が完了している間、プロセスが終了しないようにする必要があります。

webpack() ファサードは、コールバックが渡されると自動的に close を呼び出します。

移行: Node.js API を使用する場合は、完了したら必ず Compiler.close を呼び出すようにしてください。

ファイルの出力

Webpack は、最初のビルドですべての出力ファイルを常にエミットしていましたが、インクリメンタル (watch) ビルド中に変更されていないファイルの書き込みをスキップしていました。webpack の実行中に、他のものが出力ファイルを変更しないと想定されています。

永続的なキャッシュが追加されたことで、webpack プロセスを再起動した場合でも watch のようなエクスペリエンスを提供する必要がありますが、webpack が実行されていない場合でも、他のものが出力ディレクトリを変更しないと考えるのは、あまりにも強い仮定でしょう。

そのため、webpack は出力ディレクトリ内の既存のファイルをチェックし、その内容をメモリ内の出力ファイルと比較します。ファイルが変更された場合にのみ、ファイルを書き込みます。これは最初のビルドでのみ実行されます。実行中の webpack プロセスで新しいアセットが生成された場合、インクリメンタルビルドでは常にファイルが書き込まれます。

webpack とプラグインは、コンテンツが変更された場合にのみ新しいアセットを生成すると想定しています。入力が同じ場合は新しいアセットが生成されないように、キャッシュを使用する必要があります。このアドバイスに従わないと、パフォーマンスが低下します。

[immutable] (コンテンツハッシュを含む) としてフラグが立てられたファイルは、同じ名前のファイルが既に存在する場合は書き込まれません。コンテンツハッシュは、ファイルの内容が変更されると変更されると想定しています。これは一般的には当てはまりますが、webpack またはプラグインの開発中は必ずしも当てはまるとは限りません。

主な変更点: 長年の未解決の問題

単一ファイルターゲットのコード分割

単一のファイルのみを起動できるターゲット (node、WebWorker、electron main など) は、実行時にブートストラップに必要な依存ピースを自動的にロードすることをサポートするようになりました。

これにより、これらのターゲットで opimization.splitChunks を chunks: "all" で、optimization.runtimeChunk も使用できるようになります。

チャンクのロードが非同期であるターゲットでは、初期評価も非同期になることに注意してください。これは、エクスポートされた値が Promise であるため、output.library を使用する場合に問題となる可能性があります。

更新されたリゾルバー

enhanced-resolve が v5 に更新されました。これには次の改善点があります。

リゾルバーは、不足しているファイルなど、より多くの依存関係を追跡します
エイリアスには複数の代替案がある場合があります
false へのエイリアスが使用可能になりました
exports や imports フィールドなどの機能のサポート
パフォーマンスの向上

JS のないチャンク

JS コードを含まないチャンクは、JS ファイルを生成しなくなります。これにより、CSS のみを含むチャンクを持つことができます。

主な変更点: 今後

実験

すべての機能が最初から安定しているわけではありません。webpack 4 では、実験的な機能を追加し、それらが実験的であることを変更ログに記載しましたが、これらの機能が実験的であることを設定から常に明確にすることができませんでした。

webpack 5 では、実験的な機能を有効にできる新しい experiments 設定オプションがあります。これにより、有効になっている/使用されているものが明確になります。

webpack はセマンティックバージョニングに従いますが、実験的な機能については例外を設けます。実験的な機能には、マイナーな webpack バージョンで破壊的な変更が含まれる可能性があります。このようなことが発生した場合は、変更ログに明確なメモを追加します。これにより、安定した機能についてはメジャーバージョンに長く留まることができる一方で、実験的な機能についてはより迅速に反復することができます。

次の実験が webpack 5 に同梱されます

webpack 4 のように古い WebAssembly のサポート (experiments.syncWebAssembly)
更新された仕様に従った新しい WebAssembly のサポート (experiments.asyncWebAssembly)
- これにより、WebAssembly モジュールが非同期モジュールになります
Top Level Await Stage 3 プロポーザル (experiments.topLevelAwait)
- トップレベルで await を使用すると、モジュールが非同期モジュールになります
バンドルをモジュールとしてエミット (experiments.outputModule)
- これにより、バンドルからラッパー IIFE が削除され、厳密モードが強制され、<script type="module"> を介して遅延ロードされ、モジュールモードで最小化されます

これは、WebAssembly のサポートがデフォルトで無効になっていることも意味することに注意してください。

Node.js の最小バージョン

サポートされている Node.js の最小バージョンが 6 から 10.13.0(LTS) に引き上げられました。

移行: 利用可能な最新の Node.js バージョンにアップグレードしてください。

設定の変更点

構造の変更点

entry: {} で空のオブジェクトが許可されるようになりました (プラグインでエントリを追加できるようにするため)
target が配列、バージョン、browserslist をサポート
cache: Object が削除されました: メモリキャッシュオブジェクトへの設定はできなくなりました
cache.type が追加されました: "memory" と "filesystem" の間で選択できるようになりました
cache.type = "filesystem" 用の新しい設定オプションが追加されました
- cache.cacheDirectory
- cache.name
- cache.version
- cache.store
- cache.hashAlgorithm
- cache.idleTimeout
- cache.idleTimeoutForInitialStore
- cache.buildDependencies
snapshot.resolveBuildDependencies が追加されました
snapshot.resolve が追加されました
snapshot.module が追加されました
snapshot.managedPaths が追加されました
snapshot.immutablePaths が追加されました
resolve.cache が追加されました: 安全な resolve キャッシュを無効/有効にできます
resolve.concord が削除されました
resolve.moduleExtensions が削除されました
resolve.alias の値は、配列または false を指定できるようになりました
resolve.restrictions が追加されました: 潜在的な resolve 結果を制限できます
resolve.fallback が追加されました: resolve に失敗したリクエストをエイリアスできます
resolve.preferRelative が追加されました: モジュールリクエストが相対リクエストでもある場合に、モジュールを resolve できます
ネイティブ Node.js モジュールの自動ポリフィルが削除されました
- node.Buffer が削除されました
- node.console が削除されました
- node.process が削除されました
- node.* (Node.js ネイティブモジュール) が削除されました
- 移行: resolve.alias および ProvidePlugin を使用してください。エラーが発生した場合はヒントが表示されます。(v4 で使用されていたポリフィルとモックについては、node-libs-browser を参照してください)
output.filename が関数を指定できるようになりました
output.assetModuleFilename が追加されました
output.jsonpScriptType が output.scriptType に名前変更されました
devtool がより厳格になりました
- フォーマット: false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
optimization.chunkIds: "deterministic" が追加されました
optimization.moduleIds: "deterministic" が追加されました
optimization.moduleIds: "hashed" が非推奨になりました
optimization.moduleIds: "total-size" が削除されました
モジュール ID およびチャンク ID の非推奨フラグが削除されました
- optimization.hashedModuleIds が削除されました
- optimization.namedChunks が削除されました (NamedChunksPlugin も同様)
- optimization.namedModules が削除されました (NamedModulesPlugin も同様)
- optimization.occurrenceOrder が削除されました
- 移行: chunkIds および moduleIds を使用してください
optimization.splitChunks の test がチャンク名に一致しなくなりました
- 移行: テスト関数 (module, { chunkGraph }) => chunkGraph.getModuleChunks(module).some(chunk => chunk.name === "name") を使用してください
optimization.splitChunks に minRemainingSize が追加されました
optimization.splitChunks の filename が関数を指定できるようになりました
optimization.splitChunks のサイズが、ソースタイプごとのサイズを持つオブジェクトを指定できるようになりました
- minSize
- minRemainingSize
- maxSize
- maxAsyncSize
- maxInitialSize
optimization.splitChunks に maxSize に加えて maxAsyncSize および maxInitialSize が追加されました: 初期チャンクと非同期チャンクで異なる最大サイズを指定できます
optimization.splitChunks の name: true が削除されました: 自動名はサポートされなくなりました
- 移行: デフォルトを使用してください。chunkIds: "named" を使用すると、デバッグに役立つ名前がファイルに付けられます
optimization.splitChunks.cacheGroups[].idHint が追加されました: 名前付きチャンク ID の選択方法に関するヒントを与えます
optimization.splitChunks の automaticNamePrefix が削除されました
- 移行: 代わりに idHint を使用してください
optimization.splitChunks の filename が初期チャンクに限定されなくなりました
optimization.splitChunks に、モジュールを比較する際に使用されたエクスポートを含めるための usedExports が追加されました
optimization.splitChunks.defaultSizeTypes が追加されました: サイズに数値を使用する場合のサイズタイプを指定します
optimization.mangleExports が追加されました
optimization.minimizer で "..." を使用してデフォルトを参照できるようになりました
optimization.usedExports に、ランタイムごとの分析を無効にしてグローバルに実行できるようにする (パフォーマンスが向上) ための "global" 値が追加されました
optimization.noEmitOnErrors が optimization.emitOnErrors に名前変更され、ロジックが反転しました
optimization.realContentHash が追加されました
output.devtoolLineToLine が削除されました
- 移行: 代替はありません
output.chunkFilename: Function が許可されるようになりました
output.hotUpdateChunkFilename: Function が禁止されるようになりました: いずれにしても機能しませんでした。
output.hotUpdateMainFilename: Function が禁止されるようになりました: いずれにしても機能しませんでした。
output.importFunctionName: string は、サポートされていない環境でのポリフィルを許可するために、import() の代替として使用される名前を指定します
output.charset が追加されました: false に設定すると、スクリプトタグの charset プロパティが省略されます
output.hotUpdateFunction が output.hotUpdateGlobal に名前変更されました
output.jsonpFunction が output.chunkLoadingGlobal に名前変更されました
output.chunkCallbackFunction が output.chunkLoadingGlobal に名前変更されました
output.chunkLoading が追加されました
output.enabledChunkLoadingTypes が追加されました
output.chunkFormat が追加されました
module.rules の resolve および parser が異なる方法でマージされるようになりました (オブジェクトはディープマージされ、配列には前の値を参照する "..." を含めることができます)
module.rules に parser.worker が追加されました: サポートされるワーカーを設定できます
module.rules の query および loaders が削除されました
module.rules の options で文字列を渡すことは非推奨になりました
- 移行: 代わりにオプションオブジェクトを渡してください。サポートされていない場合はローダーに関する issue をオープンしてください
module.rules に mimetype が追加されました: DataURI の mimetype に一致させることができます
module.rules に descriptionData が追加されました: package.json からのデータに一致させることができます
module.defaultRules で "..." を使用してデフォルトを参照できるようになりました
stats.chunkRootModules が追加されました: チャンクのルートモジュールを表示します
stats.orphanModules が追加されました: 出力されないモジュールを表示します
stats.runtime が追加されました: ランタイムモジュールを表示します
stats.chunkRelations が追加されました: 親/子/兄弟チャンクを表示します
stats.errorStack が追加されました: エラーの webpack 内部スタックトレースを表示します
stats.preset が追加されました: プリセットを選択します
stats.relatedAssets が追加されました: 他のアセットに関連するアセット (例: SourceMaps) を表示します
stats.warningsFilter が非推奨になり、ignoreWarnings が推奨されるようになりました
BannerPlugin.banner の署名が変更されました
- data.basename が削除されました
- data.query が削除されました
- 移行: filename から抽出してください
SourceMapDevToolPlugin の lineToLine が削除されました
- 移行: 代替はありません
フルコンパイルのハッシュとしての [hash] が非推奨になりました
- 移行: 代わりに [fullhash] を使用するか、別のハッシュオプションを使用することをお勧めします
[modulehash] が非推奨になりました
- 移行: 代わりに [hash] を使用してください
[moduleid] が非推奨になりました
- 移行: 代わりに [id] を使用してください
[filebase] が削除されました
- 移行: 代わりに [base] を使用してください
ファイルベースのテンプレート (例: SourceMapDevToolPlugin) の新しいプレースホルダー
- [name]
- [base]
- [path]
- [ext]
関数を渡すときの externals は、異なる署名 ({ context, request }, callback) を持つようになりました
- 移行: 署名を変更してください
externalsPresets が追加されました
experiments が追加されました (上記の実験セクションを参照)
watchOptions.followSymlinks が追加されました
watchOptions.ignored が RegExp を指定できるようになりました
webpack.util.serialization が公開されるようになりました。

デフォルトの変更点

browserslist 設定が利用可能な場合、target はデフォルトで "browserslist" になりました
module.unsafeCache は、デフォルトで node_modules に対してのみ有効になりました
optimization.moduleIds は、size ではなく、プロダクションモードではデフォルトで deterministic になりました
optimization.chunkIds は、total-size ではなく、プロダクションモードではデフォルトで deterministic になりました
optimization.nodeEnv は、none モードではデフォルトで false になりました
optimization.splitChunks.minSize は、プロダクションではデフォルトで 20k になりました
optimization.splitChunks.enforceSizeThreshold は、プロダクションではデフォルトで 50k になりました
optimization.splitChunks の minRemainingSize は、デフォルトで minSize になりました
- これにより、残りの部分が小さすぎる場合に作成される分割チャンクが少なくなります
optimization.splitChunks の maxAsyncRequests および maxInitialRequests のデフォルト値が 30 に増加しました
optimization.splitChunks.cacheGroups.vendors が optimization.splitChunks.cacheGroups.defaultVendors に名前変更されました
optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk は、デフォルトで true になりました
optimization.minimizer のターゲットのデフォルトでは、terser オプションで compress.passes: 2 が使用されるようになりました
cache が使用されている場合、resolve(Loader).cache はデフォルトで true になりました
resolve(Loader).cacheWithContext はデフォルトで false になりました
resolveLoader.extensions で .json が削除されました
node-target では、node.global node.__filename および node.__dirname はデフォルトで false になりました
stats.errorStack はデフォルトで false になりました

ローダー関連の変更点

`this.getOptions`

この新しい API は、ローダーでのオプションの使用を簡略化します。検証用の JSON スキーマを渡すことができます。詳細については、PR を参照してください

`this.exec`

これはローダーコンテキストから削除されました

移行: これはローダー自体で実装できます

`this.getResolve`

ローダー API の getResolve(options) は、module.rules の resolve を参照して、異なる方法でオプションをマージします。

webpack 5 は異なる発行依存関係を区別するため、オプションとして dependencyType (例: "esm"、"commonjs" など) を渡すことが理にかなっている場合があります。

主な内部変更点

次の変更は、プラグインの作成者のみに関連します

新しいプラグインの順序

webpack 5 のプラグインは、設定のデフォルトが適用される前に適用されるようになりました。これにより、プラグインは独自のデフォルトを適用したり、設定プリセットとして機能したりできます。

ただし、これはプラグインが適用されるときに設定値が設定されていることに依存できないため、破壊的な変更でもあります。

移行: プラグインフック内でのみ設定にアクセスしてください。または、設定へのアクセスを完全に避け、コンストラクターを介してオプションを取得することをお勧めします。

ランタイムモジュール

ランタイムコードの大部分は、いわゆる「ランタイムモジュール」に移動されました。これらの特別なモジュールは、ランタイムコードの追加を担当します。これらは任意のチャンクに追加できますが、現在は常にランタイムチャンクに追加されます。「ランタイム要件」は、どのランタイムモジュール (またはコアランタイム部分) がバンドルに追加されるかを制御します。これにより、使用されているランタイムコードのみがバンドルに追加されることが保証されます。将来的には、ランタイムコードが必要なときにロードするために、オンデマンドロードされたチャンクにランタイムモジュールを追加することもできます。

ほとんどの場合、コアランタイムを使用すると、__webpack_require__ で呼び出す代わりに、エントリモジュールをインライン化できます。バンドル内に他のモジュールがない場合、__webpack_require__ はまったく必要ありません。これは、複数のモジュールが 1 つのモジュールに連結されるモジュール連結とうまく組み合わされます。

最良の場合、ランタイムコードはまったく必要ありません。

移行: プラグインで webpack ランタイムにランタイムコードを注入している場合は、代わりに RuntimeModules の使用を検討してください。

シリアライゼーション

webpack で複雑なオブジェクトをシリアライズできるように、シリアライゼーションのメカニズムが追加されました。これはオプトインのセマンティクスを持っているため、シリアライズする必要があるクラスは明示的にフラグを立てる必要があります（そしてそのシリアライゼーションを実装する必要があります）。これは、ほとんどのモジュール、すべての依存関係、およびいくつかのエラーに対して行われています。

移行: カスタムモジュールまたは依存関係を使用する場合は、永続的なキャッシュのメリットを得るためにシリアライズ可能にすることをお勧めします。

キャッシュ用プラグイン

プラグインインターフェイスを備えた Cache クラスが追加されました。このクラスは、キャッシュへの書き込みとキャッシュからの読み込みに使用できます。構成に応じて、さまざまなプラグインがキャッシュに機能を追加できます。MemoryCachePlugin はインメモリキャッシュを追加します。FileCachePlugin は永続的な（ファイルシステム）キャッシュを追加します。

FileCachePlugin は、シリアライゼーションメカニズムを使用して、キャッシュされたアイテムをディスクに永続化し、復元します。

フックオブジェクトのフリーズ

hooks を持つクラスは、その hooks オブジェクトがフリーズされるため、この方法でカスタムフックを追加することはできなくなりました。

移行: カスタムフックを追加する推奨される方法は、WeakMap と静的な getXXXHooks(XXX) メソッド（例: getCompilationHook(compilation)）を使用することです。内部クラスは、カスタムフックに使用されるのと同じメカニズムを使用します。

Tapable のアップグレード

webpack 3 プラグインの互換性レイヤーが削除されました。これは webpack 4 ではすでに非推奨になっていました。

あまり使用されていないいくつかの tapable API が削除または非推奨になりました。

移行: 新しい tapable API を使用してください。

ステージングされたフック

シーリングプロセスのいくつかのステップには、異なるステージに対応する複数のフックがありました。例: optimizeDependenciesBasic、optimizeDependencies、optimizeDependenciesAdvanced。これらは、stage オプションで使用できる単一のフックに置き換えられました。可能なステージの値については、OptimizationStages を参照してください。

移行: 代わりに残りのフックにフックします。stage オプションを追加できます。

Main/Chunk/ModuleTemplate の非推奨化

バンドルテンプレートがリファクタリングされました。MainTemplate/ChunkTemplate/ModuleTemplate は非推奨となり、JavaScriptModulesPlugin が JS テンプレートを処理するようになりました。

このリファクタリングの前は、JS 出力は Main/ChunkTemplate によって処理され、別の出力（例: WASM、CSS）はプラグインによって処理されていました。これは、JS がファーストクラスであり、別の出力がセカンドクラスであるかのように見えます。リファクタリングにより、これが変更され、すべての出力はそれぞれのプラグインによって処理されるようになりました。

テンプレートの一部にフックすることはまだ可能です。フックは、Main/ChunkTemplate ではなく、JavaScriptModulesPlugin にあります。（はい、プラグインにもフックを含めることができます。私はそれらをアタッチされたフックと呼んでいます。）

互換性レイヤーがあるため、Main/Chunk/ModuleTemplate はまだ存在しますが、新しいフックロケーションへのタップコールを委任するだけです。

移行: 非推奨メッセージの指示に従ってください。ほとんどの場合、異なる場所にあるフックを指しています。

エントリーポイント記述子

オブジェクトがエントリポイントとして渡される場合、値は文字列、文字列の配列、または記述子である可能性があります。

module.exports = {
  entry: {
    catalog: {
      import: './catalog.js',
    },
  },
};

記述子構文を使用して、追加のオプションをエントリポイントに渡すことができます。

エントリポイントの出力ファイル名

デフォルトでは、エントリチャンクの出力ファイル名は output.filename から抽出されますが、特定のエントリに対してカスタムの出力ファイル名を指定できます。

module.exports = {
  entry: {
    about: { import: './about.js', filename: 'pages/[name][ext]' },
  },
};

エントリポイントの依存関係

デフォルトでは、すべてのエントリチャンクは使用するすべてのモジュールを格納します。dependOn オプションを使用すると、あるエントリチャンクから別のエントリチャンクにモジュールを共有できます。

module.exports = {
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};

アプリチャンクには、react-vendors が持つモジュールは含まれません。

エントリポイントライブラリ

エントリ記述子を使用すると、エントリポイントごとに異なる library オプションを渡すことができます。

module.exports = {
  entry: {
    commonjs: {
      import: './lib.js',
      library: {
        type: 'commonjs-module',
      },
    },
    amd: {
      import: './lib.js',
      library: {
        type: 'amd',
      },
    },
  },
};

エントリポイントランタイム

エントリ記述子を使用すると、エントリごとに runtime を指定できます。指定すると、この名前のチャンクが作成され、エントリのランタイムコードのみが含まれます。複数のエントリが同じ runtime を指定すると、そのチャンクにはこれらのすべてのエントリの共通ランタイムが含まれます。これは、同じ HTML ページで一緒に使用できることを意味します。

module.exports = {
  entry: {
    app: {
      import: './app.js',
      runtime: 'app-runtime',
    },
  },
};

エントリポイントのチャンクローディング

エントリ記述子を使用すると、エントリごとに chunkLoading を指定できます。このエントリのランタイムは、これを使用してチャンクをロードします。

module.exports = {
  entry: {
    app: {
      import: './app.js',
    },
    worker: {
      import: './worker.js',
      chunkLoading: 'importScripts',
    },
  },
};

順序と ID

webpack は、モジュールとチャンクをコンパイルフェーズで特定の順序で並べ、ID をインクリメンタルな順序で割り当てていました。これはもはや当てはまりません。順序は ID 生成には使用されなくなり、代わりに ID 生成の完全な制御はプラグインにあります。

モジュールとチャンクの順序を最適化するフックが削除されました。

移行: コンパイルフェーズでのモジュールとチャンクの順序に依存することはできなくなりました。

配列からセットへ

Compilation.modules はセットになりました
Compilation.chunks はセットになりました
Chunk.files はセットになりました

非推奨の警告を印刷する互換性レイヤーがあります。

移行: 配列メソッドの代わりにセットメソッドを使用してください。

Compilation.fileSystemInfo

この新しいクラスは、キャッシュされた方法でファイルシステムに関する情報にアクセスするために使用できます。現在、ファイルとディレクトリの両方のタイムスタンプを要求できます。タイムスタンプに関する情報は、可能であればウォッチャーから転送され、それ以外の場合はファイルシステムアクセスによって決定されます。

将来的には、ファイルコンテンツハッシュの要求が追加され、モジュールはファイルハッシュの代わりにファイルコンテンツで有効性をチェックできるようになります。

移行: file/contextTimestamps を使用する代わりに、compilation.fileSystemInfo API を使用してください。

ディレクトリのタイムスタンプが利用可能になり、ContextModules のシリアライゼーションが可能になりました。

変更されたファイルを参照しやすくするために、Compiler.modifiedFiles が（Compiler.removedFiles の隣に）追加されました。

ファイルシステム

compiler.inputFileSystem および compiler.outputFileSystem の他に、入力または出力と見なされないすべての fs アクション（レコード、キャッシュ、またはプロファイリング出力の書き込みなど）用の新しい compiler.intermediateFileSystem があります。

ファイルシステムには、fs インターフェイスがあり、join や mkdirp などの追加のメソッドを必要としなくなりました。ただし、join や dirname などのメソッドがある場合は、それらが使用されます。

ホットモジュールリプレイスメント

HMR ランタイムは、ランタイムモジュールにリファクタリングされました。HotUpdateChunkTemplate は ChunkTemplate にマージされました。ChunkTemplates とプラグインは、HotUpdateChunk も処理する必要があります。

HMR ランタイムの JavaScript 部分は、コア HMR ランタイムから分離されました。他のモジュールタイプも、独自の方法で HMR を処理できるようになりました。将来的には、これにより、例として mini-css-extract-plugin または WASM モジュールの HMR が可能になります。

移行: これは新しく導入された機能であるため、移行するものはありません。

import.meta.webpackHot は、module.hot と同じ API を公開します。これは、module にアクセスできない厳密な ESM モジュール（.mjs、package.json の type: "module"）からも使用できます。

ワークキュー

webpack は、関数を呼び出す関数と、並列処理を制限する semaphore によってモジュール処理を処理していました。Compilation.semaphore は削除され、非同期キューがワークのキューイングと処理を処理するようになりました。各ステップには個別のキューがあります。

Compilation.factorizeQueue: 依存関係のグループに対してモジュールファクトリを呼び出します。
Compilation.addModuleQueue: モジュールをコンパイルキューに追加します（キャッシュからモジュールを復元する場合があります）。
Compilation.buildQueue: 必要に応じてモジュールをビルドします（モジュールをキャッシュに保存する場合があります）。
Compilation.rebuildQueue: 手動でトリガーされた場合にモジュールを再度ビルドします。
Compilation.processDependenciesQueue: モジュールの依存関係を処理します。

これらのキューには、ジョブ処理を監視およびインターセプトするいくつかのフックがあります。

将来的には、複数のコンパイラーが連携して動作し、これらのキューをインターセプトすることでジョブオーケストレーションを実行できるようになります。

移行: これは新しく導入された機能であるため、移行するものはありません。

ロギング

webpack の内部には、いくつかのロギングが含まれるようになりました。stats.logging および infrastructureLogging オプションを使用して、これらのメッセージを有効にできます。

モジュールおよびチャンクグラフ

webpack は、解決されたモジュールを依存関係に格納し、含まれるモジュールをチャンクに格納していました。これはもはや当てはまりません。モジュールグラフでモジュールがどのように接続されているかに関するすべての情報は、ModuleGraph クラスに格納されるようになりました。モジュールがチャンクとどのように接続されているかに関するすべての情報は、ChunkGraph クラスに格納されるようになりました。例: チャンクグラフに依存する情報も、関連するクラスに格納されます。

つまり、モジュールに関する次の情報が移動されました

モジュール接続 -> ModuleGraph
モジュール発行者 -> ModuleGraph
モジュール最適化のベイルアウト -> ModuleGraph (TODO: ChunkGraph にすべきかどうかを確認)
モジュール usedExports -> ModuleGraph
モジュール providedExports -> ModuleGraph
モジュールの事前順序インデックス -> ModuleGraph
モジュールの事後順序インデックス -> ModuleGraph
モジュールの深さ -> ModuleGraph
モジュールプロファイル -> ModuleGraph
モジュール ID -> ChunkGraph
モジュールハッシュ -> ChunkGraph
モジュールランタイム要件 -> ChunkGraph
モジュールはチャンク内にある -> ChunkGraph
モジュールはチャンク内のエントリである -> ChunkGraph
モジュールはチャンク内のランタイムモジュールである -> ChunkGraph
チャンクランタイム要件 -> ChunkGraph

webpack は、キャッシュから復元されたときに、モジュールをグラフから切断していました。これはもはや必要ありません。モジュールはグラフに関する情報を格納せず、技術的には複数のグラフで使用できます。これにより、キャッシュが容易になります。

これらの変更のほとんどには互換レイヤーがあり、使用時に非推奨の警告を表示します。

移行: ModuleGraphとChunkGraphで新しいAPIを使用してください。

Init Fragments

DependenciesBlockVariablesは削除され、InitFragmentsが代わりに使われるようになりました。DependencyTemplatesは、モジュールのソースの先頭にコードを注入するためにInitFragmentsを追加できるようになりました。InitFragmentsは重複排除を可能にします。

移行: ソースに負のインデックスで何かを挿入する代わりに、InitFragmentsを使用してください。

モジュールソースタイプ

モジュールは、Module.getSourceTypes()を介してサポートするソースタイプを定義する必要があります。それに応じて、さまざまなプラグインがこれらのタイプでsource()を呼び出します。例：ソースタイプがjavascriptの場合、JavascriptModulesPluginはソースコードをバンドルに埋め込みます。ソースタイプがwebassemblyの場合、WebAssemblyModulesPluginはwasmファイルを生成します。カスタムソースタイプもサポートされています。例：mini-css-extract-pluginは、ソースコードをcssファイルに埋め込むためにソースタイプstylesheetを使用する可能性があります。

モジュールタイプとソースタイプの間に関係はありません。例：モジュールタイプjsonもソースタイプjavascriptを使用し、モジュールタイプwebassembly/experimentalはソースタイプjavascriptとwebassemblyを使用します。

移行: カスタムモジュールは、これらの新しいインターフェースメソッドを実装する必要があります。

Stats用プラグイン

Statsのpreset、default、json、およびtoStringは、プラグインシステムによって組み込まれるようになりました。現在のStatsをプラグインに変換しました。

移行: Statsの機能をすべて置き換えるのではなく、カスタマイズできるようになりました。追加情報を別のファイルに書き込む代わりに、stats jsonに追加できます。

新しい監視機能

webpackで使用されるウォッチャーがリファクタリングされました。以前はchokidarとネイティブ依存関係のfsevents（macOSのみ）を使用していました。現在では、ネイティブのNode.js fsのみに基づいています。つまり、webpackにはネイティブ依存関係が残っていません。

また、監視中にファイルシステムに関するより多くの情報をキャプチャします。mtimeと監視イベント時間、および欠落しているファイルに関する情報をキャプチャするようになりました。このため、WatchFileSystem APIが少し変更されました。また、その際に配列をSetに、オブジェクトをMapに変換しました。

エミット後のSizeOnlySource

webpackは、メモリ使用量を削減するために、Compilation.assetsのSourcesをSizeOnlySourceバリアントに置き換えるようになりました。

アセットの複数回エミット

複数のアセットが同じファイル名に対して異なるコンテンツをエミットしていますという警告がエラーになりました。

ExportsInfo

モジュールのエクスポートに関する情報を保存する方法がリファクタリングされました。ModuleGraphには、各ModuleのExportsInfoがあり、エクスポートごとに情報を保存します。また、不明なエクスポートに関する情報や、モジュールが副作用のみの方法で使用されているかどうかに関する情報も保存します。

各エクスポートについて、次の情報が保存されます。

エクスポートは使用されていますか？はい、いいえ、静的に不明、未決定。（optimization.usedExportsも参照）
エクスポートは提供されていますか？はい、いいえ、静的に不明、未決定。（optimization.providedExportsも参照）
エクスポート名を変更できますか？はい、いいえ、未決定。
エクスポートが名前変更されている場合、新しい名前。（optimization.mangleExportsも参照）
エクスポート自体に情報が添付されたオブジェクトの場合、ネストされたExportsInfo
- 名前空間オブジェクトを再エクスポートするために使用されます。import * as X from "..."; export { X };
- JSONモジュール内の構造を表現するために使用されます。

コード生成フェーズ

Compilationは、別のコンパイルフェーズとしてコード生成を特徴とするようになりました。Module.source()またはModule.getRuntimeRequirements()内で隠れて実行されることはなくなりました。

これにより、フローが大幅にクリーンになるはずです。また、このフェーズの進捗状況を報告したり、プロファイリング時にコード生成をより可視化したりすることもできます。

移行: Module.source()およびModule.getRuntimeRequirements()は非推奨になりました。代わりにModule.codeGeneration()を使用してください。

DependencyReference

webpackには、依存関係の参照を表す単一のメソッドとタイプ（Compilation.getDependencyReferenceがDependencyReferenceを返す）がありました。このタイプには、参照されるモジュール、インポートされたエクスポート、弱い参照であるかどうか、および順序付けに関連する情報など、この参照に関するすべての情報が含まれていました。

これらの情報をすべてまとめることは、参照を取得するのにコストがかかり、頻繁に（誰かが情報を必要とするたびに）呼び出されます。

webpack 5では、コードベースのこの部分がリファクタリングされ、メソッドが分割されました。

参照されるモジュールは、ModuleGraphConnectionから読み取ることができます。
インポートされたエクスポート名は、Dependency.getReferencedExports()を介して取得できます。
Dependencyクラスにweakフラグがあります。
順序付けはHarmonyImportDependenciesのみに関連し、sourceOrderプロパティを介して取得できます。

プレゼンテーション依存関係

NormalModulesに新しいタイプの依存関係が追加されました: プレゼンテーション依存関係

これらの依存関係はコード生成フェーズでのみ使用されますが、モジュールグラフの構築中には使用されません。そのため、参照されるモジュールを持つことはなく、エクスポート/インポートに影響を与えることもありません。

これらの依存関係は処理が安価であり、webpackは可能な限りこれらを使用します。

非推奨のローダー

null-loader

これは非推奨になります。以下を使用してください

module.exports = {
  resolve: {
    alias: {
      xyz$: false,
    },
  },
};

または絶対パスを使用してください

module.exports = {
  resolve: {
    alias: {
      [path.resolve(__dirname, '....')]: false,
    },
  },
};

マイナーな変更

Compiler.name: 絶対パスでコンパイラー名を生成する場合、名前の両方の部分で|または!で区切るようにしてください。
- 区切り文字としてスペースを使用することは非推奨になりました。（パスにスペースが含まれている可能性があります）
- ヒント: |は、Stats文字列出力でスペースに置き換えられます。
SystemPluginはデフォルトで無効になりました。
- 移行: 仕様が削除されたため、使用しないでください。Rule.parser.system: trueで再度有効にできます。
ModuleConcatenationPlugin: DependencyVariablesが削除されたため、連結はDependencyVariablesによって阻止されなくなりました。
- これは、module、global、process、またはProvidePluginの場合に連結できることを意味します。
Stats.presetToOptionsが削除されました。
- 移行: 代わりにcompilation.createStatsOptionsを使用してください。
SingleEntryPluginとSingleEntryDependencyが削除されました。
- 移行: EntryPluginとEntryDependencyを使用してください。
チャンクは複数のエントリモジュールを持つことができるようになりました。
ExtendedAPIPluginが削除されました。
- 移行: 不要になりました。__webpack_hash__と__webpack_chunkname__は常に使用でき、必要な場所にランタイムコードが挿入されます。
ProgressPluginは、reportProgressにtapableコンテキストを使用しなくなりました。
- 移行: 代わりにProgressPlugin.getReporter(compiler)を使用してください。
ProvidePluginが.mjsファイルで再有効化されました。
Stats jsonのerrorsとwarningsには、文字列ではなく、プロパティに分割された情報を持つオブジェクトが含まれるようになりました。
- 移行: プロパティの情報にアクセスしてください。例：message
Compilation.hooks.normalModuleLoaderは非推奨になりました。
- 移行: 代わりにNormalModule.getCompilationHooks(compilation).loaderを使用してください。
NormalModuleFactoryのフックをウォーターフォールからベイリングに変更し、ウォーターフォール関数を返すフックを変更および名前変更しました。
compilationParams.compilationDependenciesを削除しました。
- プラグインは、compilation.file/context/missingDependenciesに追加することで、コンパイルに依存関係を追加できます。
- 互換レイヤーは、compilationDependencies.addをfileDependencies.addに委譲します。
stats.assetsByChunkName[x]は常に配列になりました。
スクリプトファイルのファイル名を取得するために__webpack_get_script_filename__関数が追加されました。
package.jsonの"sideEffects"は、micromatchではなくglob-to-regexによって処理されます。
- これにより、エッジケースでセマンティクスが変更されている可能性があります。
IgnorePluginからcheckContextが削除されました。
新しい__webpack_exports_info__ APIを使用すると、エクスポートの使用状況を調べることができます。
SourceMapDevToolPluginがチャンク以外のアセットにも適用されるようになりました。
EnvironmentPluginは、参照された環境変数が欠落していて、フォールバックがない場合にエラーを表示するようになりました。
スキーマからserveプロパティを削除します。

その他のマイナーな変更

組み込みディレクトリを削除し、組み込みをランタイムモジュールに置き換えました。
非推奨の機能を削除しました。
- BannerPluginは、オブジェクト、文字列、または関数である可能性のある1つの引数のみをサポートするようになりました。
CachePluginを削除しました。
Chunk.entryModuleは非推奨です。代わりにChunkGraphを使用してください。
Chunk.hasEntryModuleは非推奨です。
Chunk.addModuleは非推奨です。
Chunk.removeModuleは非推奨です。
Chunk.getNumberOfModulesは非推奨です。
Chunk.modulesIterableは非推奨です。
Chunk.compareToは非推奨です。
Chunk.containsModuleは非推奨です。
Chunk.getModulesは非推奨です。
Chunk.removeは非推奨です。
Chunk.moveModuleは非推奨です。
Chunk.integrateは非推奨です。
Chunk.canBeIntegratedは非推奨です。
Chunk.isEmptyは非推奨です。
Chunk.modulesSizeは非推奨です。
Chunk.sizeは非推奨です。
Chunk.integratedSizeは非推奨です。
Chunk.getChunkModuleMapsは非推奨です。
Chunk.hasModuleInGraphは非推奨です。
Chunk.updateHashシグネチャが変更されました。
Chunk.getChildIdsByOrdersシグネチャが変更されました。（TODO: ChunkGraphへの移動を検討）
Chunk.getChildIdsByOrdersMapシグネチャが変更されました。（TODO: ChunkGraphへの移動を検討）
Chunk.getChunkModuleMapsを削除しました。
Chunk.setModulesを削除しました。
非推奨のチャンクメソッドを削除しました。
ChunkGraphが追加されました。
ChunkGroup.setParentsを削除しました。
ChunkGroup.containsModuleを削除しました。
Compilation.cacheは削除され、Compilation.getCache()が代わりに使用されるようになりました。
ChunkGroup.removeは、グループをブロックから切断しなくなりました。
ChunkGroup.compareToシグネチャが変更されました。
ChunkGroup.getChildrenByOrdersシグネチャが変更されました。
ChunkGroupのインデックスとインデックスの名前が、事前/事後順序インデックスに変更されました。
- 古いゲッターは非推奨です。
ChunkTemplate.hooks.modulesシグネチャが変更されました。
ChunkTemplate.hooks.renderシグネチャが変更されました。
ChunkTemplate.updateHashForChunkシグネチャが変更されました。
Compilation.hooks.optimizeChunkOrderを削除しました。
Compilation.hooks.optimizeModuleOrderを削除しました。
Compilation.hooks.advancedOptimizeModuleOrderを削除しました。
Compilation.hooks.optimizeDependenciesBasicを削除しました。
Compilation.hooks.optimizeDependenciesAdvancedを削除しました。
Compilation.hooks.optimizeModulesBasicを削除しました。
Compilation.hooks.optimizeModulesAdvancedを削除しました。
Compilation.hooks.optimizeChunksBasicを削除しました。
Compilation.hooks.optimizeChunksAdvancedを削除しました。
Compilation.hooks.optimizeChunkModulesBasicを削除しました。
Compilation.hooks.optimizeChunkModulesAdvancedを削除しました。
Compilation.hooks.optimizeExtractedChunksBasicを削除しました。
Compilation.hooks.optimizeExtractedChunks が削除されました。
Compilation.hooks.optimizeExtractedChunksAdvanced が削除されました。
Compilation.hooks.afterOptimizeExtractedChunks が削除されました。
Compilation.hooks.stillValidModule が追加されました。
Compilation.hooks.statsPreset が追加されました。
Compilation.hooks.statsNormalize が追加されました。
Compilation.hooks.statsFactory が追加されました。
Compilation.hooks.statsPrinter が追加されました。
Compilation.fileDependencies、Compilation.contextDependencies、および Compilation.missingDependencies は、LazySets になりました。
Compilation.entries が削除されました。
- 移行: 代わりに Compilation.entryDependencies を使用してください。
Compilation._preparedEntrypoints が削除されました。
dependencyTemplates は、rawな Map ではなく、DependencyTemplates クラスになりました。
Compilation.fileTimestamps および contextTimestamps が削除されました。
- 移行: 代わりに Compilation.fileSystemInfo を使用してください。
Compilation.waitForBuildingFinished が削除されました。
- 移行: 新しいキューを使用してください。
Compilation.addModuleDependencies が削除されました。
Compilation.prefetch が削除されました。
Compilation.hooks.beforeHash は、モジュールのハッシュが作成された後に呼び出されるようになりました。
- 移行: 代わりに Compiliation.hooks.beforeModuleHash を使用してください。
Compilation.applyModuleIds が削除されました。
Compilation.applyChunkIds が削除されました。
Compiler.root が追加されました。これはルートコンパイラーを指します。
- 静的スコープではなく、WeakMap でデータをキャッシュするために使用できます。
Compiler.hooks.afterDone が追加されました。
Source.emitted は、コンパイラーによって設定されなくなりました。
- 移行: 代わりに Compilation.emittedAssets を確認してください。
Compiler/Compilation.compilerPath が追加されました。これは、コンパイラツリー内のコンパイラの一意の名前です（ルートコンパイラースコープに対して一意）。
Module.needRebuild は非推奨となりました。
- 移行: 代わりに Module.needBuild を使用してください。
Dependency.getReference のシグネチャが変更されました。
Dependency.getExports のシグネチャが変更されました。
Dependency.getWarnings のシグネチャが変更されました。
Dependency.getErrors のシグネチャが変更されました。
Dependency.updateHash のシグネチャが変更されました。
Dependency.module が削除されました。
DependencyTemplate のベースクラスができました。
MultiEntryDependency が削除されました。
EntryDependency が追加されました。
EntryModuleNotFoundError が削除されました。
SingleEntryPlugin が削除されました。
EntryPlugin が追加されました。
Generator.getTypes が追加されました。
Generator.getSize が追加されました。
Generator.generate のシグネチャが変更されました。
HotModuleReplacementPlugin.getParserHooks が追加されました。
Parser は JavascriptParser に移動しました。
ParserHelpers は JavascriptParserHelpers に移動しました。
MainTemplate.hooks.moduleObj が削除されました。
MainTemplate.hooks.currentHash が削除されました。
MainTemplate.hooks.addModule が削除されました。
MainTemplate.hooks.requireEnsure が削除されました。
MainTemplate.hooks.globalHashPaths が削除されました。
MainTemplate.hooks.globalHash が削除されました。
MainTemplate.hooks.hotBootstrap が削除されました。
MainTemplate.hooks のいくつかのシグネチャが変更されました。
Module.hash は非推奨となりました。
Module.renderedHash は非推奨となりました。
Module.reasons が削除されました。
Module.id は非推奨となりました。
Module.index は非推奨となりました。
Module.index2 は非推奨となりました。
Module.depth は非推奨となりました。
Module.issuer は非推奨となりました。
Module.profile が削除されました。
Module.prefetched が削除されました。
Module.built が削除されました。
Module.used が削除されました。
- 移行: 代わりに Module.getUsedExports を使用してください。
Module.usedExports は非推奨となりました。
- 移行: 代わりに Module.getUsedExports を使用してください。
Module.optimizationBailout は非推奨となりました。
Module.exportsArgument が削除されました。
Module.optional は非推奨となりました。
Module.disconnect が削除されました。
Module.unseal が削除されました。
Module.setChunks が削除されました。
Module.addChunk は非推奨となりました。
Module.removeChunk は非推奨となりました。
Module.isInChunk は非推奨となりました。
Module.isEntryModule は非推奨となりました。
Module.getChunks は非推奨となりました。
Module.getNumberOfChunks は非推奨となりました。
Module.chunksIterable は非推奨となりました。
Module.hasEqualsChunks が削除されました。
Module.useSourceMap は NormalModule に移動しました。
Module.addReason が削除されました。
Module.removeReason が削除されました。
Module.rewriteChunkInReasons が削除されました。
Module.isUsed が削除されました。
- 移行: 代わりに isModuleUsed、isExportUsed、および getUsedName を使用してください。
Module.updateHash のシグネチャが変更されました。
Module.sortItems が削除されました。
Module.unbuild が削除されました。
- 移行: 代わりに invalidateBuild を使用してください。
Module.getSourceTypes が追加されました。
Module.getRuntimeRequirements が追加されました。
Module.size のシグネチャが変更されました。
ModuleFilenameHelpers.createFilename のシグネチャが変更されました。
より多くのデータを含む ModuleProfile クラスが追加されました。
ModuleReason が削除されました。
ModuleTemplate.hooks のシグネチャが変更されました。
ModuleTemplate.render のシグネチャが変更されました。
Compiler.dependencies が削除されました。
- 移行: 代わりに MultiCompiler.setDependencies を使用してください。
MultiModule が削除されました。
MultiModuleFactory が削除されました。
NormalModuleFactory.fileDependencies、NormalModuleFactory.contextDependencies、および NormalModuleFactory.missingDependencies は LazySets になりました。
RuntimeTemplate メソッドは、runtimeRequirements 引数を取るようになりました。
serve プロパティが削除されました。
Stats.jsonToString が削除されました。
Stats.filterWarnings が削除されました。
Stats.getChildOptions が削除されました。
Stats ヘルパーメソッドが削除されました。
Stats.toJson のシグネチャが変更されました（2番目の引数が削除されました）。
ExternalModule.external が削除されました。
HarmonyInitDependency が削除されました。
Dependency.getInitFragments は非推奨となりました。
- 移行: 代わりに apply の initFragements を使用してください。
DependencyReference は、Moduleの代わりにモジュールへの関数を取るようになりました。
HarmonyImportSpecifierDependency.redirectedId が削除されました。
- 移行: 代わりに setId を使用してください。
acorn 5 -> 8
テスト
- HotTestCases が、複数のターゲット async-node、node、web、webworker で実行されるようになりました。
- TestCases が、store: "instant" および store: "pack" を使用したファイルシステムキャッシングでも実行されるようになりました。
- TestCases が、決定性のあるモジュール ID でも実行されるようになりました。
インポートを順序付けするためのツールが追加されました（CIでチェックされます）。
チャンク名がチャンク ID と等しい場合、ランタイムでのチャンク名マッピングにエントリが含まれなくなりました。
スコープホイスティングなどの最適化前のモジュールを指す resolvedModuleId、resolvedModuleIdentifier、および resolvedModule を Stats の理由に追加しました。
Stats の toString 出力に resolvedModule を表示します。
loader-runner がアップグレードされました: https://github.com/webpack/loader-runner/releases/tag/v3.0.0
パフォーマンス上の理由から、Compilation の file/context/missingDependencies はソートされなくなりました。
- 順序に依存しないでください。
webpack-sources がバージョン 2 にアップグレードされました: https://github.com/webpack/webpack-sources/releases/tag/v2.0.1
webpack-command のサポートが削除されました。
スキーマ検証に schema-utils@2 を使用してください。
Compiler.assetEmitted に、より多くの情報を含む改善された2番目の引数があります。
BannerPlugin は末尾の空白を省略します。
LimitChunkCountPlugin から minChunkSize オプションを削除しました。
javascript関連のファイルをサブディレクトリに再編成します。
- webpack.JavascriptModulesPlugin -> webpack.javascript.JavascriptModulesPlugin
Logger.getChildLogger が追加されました。
DllPlugin の entryOnly のデフォルトを true に変更します。
特別なリクエスト短縮ロジックを削除し、読みやすいモジュール名には単一の相対パスを使用します。
SourceMap で webpack:// URL が webpack ルートコンテキストに対する相対パスを提供できるようにします。
webpack 設定をターゲットとする CLI 引数を生成および処理するための API を追加します。
System.js を libraryTarget として使用する場合、System.js からのコンテキストとして __system_context__ を追加します。
DefinePlugin に bigint サポートを追加します。
数学などの基本的な評価に bigint サポートを追加します。
ハッシュ作成後にコンパイルハッシュを変更する機能を削除します。
HotModuleReplacementPlugin の multiStep モードを削除します。
ネストされたオブジェクトまたは配列が使用されている場合、emitAsset の assetInfo がマージされるようになりました。
アセットなどの filename に基づくパスの場合、[query] が有効なプレースホルダーになりました。
アセットおよび共有されていない関連アセットを正しく削除するために、Compilation.deleteAsset を追加します。
require("webpack-sources") を require("webpack").sources として公開します。
terser 5
文の先頭の場合、Webpack は大文字の W で記述できます。

このページを編集·このページを印刷

« 前へ

ロードマップ 2021 (2020-12-08)