Webpack4の新機能

投稿日: 2022-04-20 2022-10-07
タグ: javascript

序章

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 次のようなプロジェクトの展開に必要な最適なオプションとデフォルトを提供します。

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

次の場合、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.splitChunks と optimization.runtimeChunk. これは、共有チャンクが自動的に生成されるようになることを意味します。他のいくつかのプラグインもバージョン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の完全なリリースログはこちらで確認できます。

getdocs

13036