序章
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の完全なリリースログはこちらで確認できます。