開発者ドキュメント

Webpack4の新機能

序章

Webpack は、最新のJavaScriptアプリケーション用の静的モジュールバンドラーです。 さまざまなモジュールをすべてバンドルし、それらを1つ以上のバンドルにパッケージ化するのに役立ちます。

今週、Webpack 4がリリースされ、新機能と改善点が提供されました。 この記事では、Webpack4の新機能と改善点について説明します。

webpack 4の使用を開始するには、npmを使用してプロジェクトにインストールします。

  1. npm install webpack webpack-cli --save-dev

Yarnを使用してインストールすることもできます。

  1. yarn add webpack webpack-cli --dev

Node.jsのサポート

Webpack 4は、Node.js4のサポートを終了します。 この決定は、よりクリーンで安定したコードベースをもたらす最新のES6構文を利用するために行われました。

最新のJavaScript構文が現在使用されているため、古いバージョンのWebpackを使用しているプロジェクトではパフォーマンスが低下する可能性があることに注意してください。

ビルド速度の向上

Webpack 4を使用すると、パフォーマンスが向上したため、プロジェクトのビルド時間が最大98% d短縮されることが保証されます。

次の画像は、それぞれWebpack3とWebpack4を使用したプロジェクトのビルド時間を示しています。

Webpack3は1350ミリ秒でプロジェクトをビルドしました。 Webpack4は865ミリ秒でプロジェクトをビルドしました。

モードプロパティ

Webpack 4には、というプロパティが付属しています mode これにより、作業している環境を設定できます。 development また production. 各オプションには、独自の利点と使用法があります。

の設定 modedevelopment 次のような機能を備えた最高の開発エクスペリエンスを提供することで、構築に集中できます。

設定 modeproduction 次のようなプロジェクトの展開に必要な最適なオプションとデフォルトを提供します。

次の場合、webpackは常にエラーをスローします mode 次の図に示すように設定されていません。

あなたはであなたのモードを設定することができます webpack.config.js どちらかにファイル development また production.

webpack.config.js
module.exports = {
	mode: 'development'
}

また

webpack.config.js

module.exports = {
	mode: 'production'
}

The mode プロパティも受け入れます none それ以外の development また production Wepbackによってスローされたエラーを取り除き、すべてを無効にしたい場合。

プラグインと最適化

The CommonsChunkPlugin Webpack 4で削除され、デフォルトのセットとAPIが呼び出されて置き換えられました optimization.splitChunksoptimization.runtimeChunk. これは、共有チャンクが自動的に生成されるようになることを意味します。 他のいくつかのプラグインもバージョン4で非推奨になりました。

パフォーマンスを向上させ、最適化を最適化するために、UglifyJsはデフォルトでwebpack4にキャッシュして並列化するようになりました。

新しいモジュールタイプ

Webpackは次のモジュールタイプをサポートするようになりました。

javascript/auto 以前はWebpack3のデフォルトのモジュールでしたが、Webpack 4はコードベースからJavaScriptの特異性を完全に抽象化し、ユーザーが必要なモジュールの種類を指定できるようにこの変更を可能にしました。

また、Webpackは .wasm, .mjs, .js.json この順序で拡張。

0CJS

0CJSはZeroConfigアプリを意味します。 JavaScriptプロジェクトを起動して実行するには、最小またはゼロの構成が必要であるという考えです。 これは、比較的新しいバンドラーであるParcelも実行されることを前提としています。 アプリの構築を開始するために構成ファイルは必要ありません。

バージョン4では、Webpackはもはや必要ありません webpack.config.js ファイル。

あなたがする必要があるのは持っていることだけです ./src/index.js ファイル。 あなたが実行するときはいつでも webpack ターミナルのコマンドで、Webpackはそのファイルをアプリケーションのエントリポイントとして使用することを認識しています。 これは小さなプロジェクトに役立つかもしれません。

その他の更新

結論

これらは、webpack4にある多くの機能のほんの一部です。 次のような多くの更新と改善が楽しみです。

webpack4の完全なリリースログはこちらで確認できます。

モバイルバージョンを終了