Webpack4の新機能

序章

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

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

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

npm install webpack webpack-cli --save-dev

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

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に設定できます。各オプションには、独自の利点と使用法があります。

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

ブラウザのデバッグ用のツール。
コメント、詳細なエラーメッセージ、開発のヒントが有効になります。
高速で最適化された増分再構築。

modeをproductionに設定すると、次のようなプロジェクトの展開に必要な最適なオプションとデフォルトが提供されます。

最適化されたバンドルを生成するための最適化。
モジュールの連結（スコープの巻き上げ）。
小さい出力サイズ。
開発専用コードの除外。

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

webpack.config.jsファイルのモードをdevelopmentまたはproductionのいずれかに設定できます。

webpack.config.js

module.exports = {
    mode: 'development'
}

また

webpack.config.js

module.exports = {
    mode: 'production'
}

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

プラグインと最適化

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

NoEmitOnErrorsPluginは廃止され、optimization.noEmitOnErrorsになりました。本番モードではデフォルトでオンに設定されています
ModuleConcatenationPluginは廃止され、optimization.concatenateModulesになりました。本番モードではデフォルトでオンに設定されています
NamedModulesPluginは廃止され、optimization.namedModulesになりました。本番モードではデフォルトでオンに設定されています

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

新しいモジュールタイプ

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

javascript / auto :( webpack 3のデフォルト）すべてのモジュールシステムが有効になっているJavascriptモジュール：CommonJS、AMD、ESM
javascript / esm ：EcmaScriptモジュール、他のすべてのモジュールシステムは利用できません
javascript / dynamic ：CommonJSおよびEcmaScriptモジュールのみが使用できません
json ：JSONデータ、requireとimportを介して利用可能
webassembly / Experimental ：WebAssemblyモジュール（現在は実験的）

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はそのファイルをアプリケーションのエントリポイントとして使用することを認識します。これは小さなプロジェクトに役立つかもしれません。

その他の更新

デッドブランチはWebpack自体によって削除されるようになりました。これは以前はUglifyによって行われていましたが、現在はWebpackがデッドコードを削除する責任があります。
import()は、マジックコメントとしてwebpackIncludeとwebpackExcludeをサポートするようになりました。これにより、動的式を使用するときにファイルをフィルタリングできます。
コードでSystem.import()を使用すると、穏やかな警告が表示されるようになりました。 import()をお勧めします。
UglifyJsは、デフォルトでキャッシュして並列実行するようになりました。
スクリプトタグは、text/javascriptおよびasyncをデフォルト値として使用しなくなりました。これにより、数バイト節約できます。

結論

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

HTML/CSSモジュール。これは、HTML/CSSファイルをエントリポイントとして使用できることを意味します。
永続的なキャッシング。
マルチスレッドとマルチコア。
WebAssemblyサポートを実験的なものから安定したものに移動します。

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