webpack4がリリースされた

webpack4が2月25日にリリースされました。
今回のアップデートで『何が出来るようになった』と、今後は『何が出来るようになるのか』が書かれていたので、それをメモしておこうと思います。
英語に弱かったり、自分用に書いたため文体がおかしかったりしますがコメント等でご指摘いただけると助かります。。。

webpack3がリリースされて、約8ヶ月…

webpack3は2017年6月20日にリリースされたので、約8ヶ月ぶりの大型アップデートですね。
(4ではβ版があったので、どんな変更があるかはある程度は知っていたのですが…)
webpack4では、何が変わったのか見ていきましょう。

install方法

$> yarn add webpack --dev

or

$> npm i webpack --save-dev

バージョンの記述がなくなりました。
後、webpack4ではyarnの方が先に書かれていました。
(yarnの方が人気になって来ている?)

ビルド時間が速くなった

webpack3に比べて、ビルド時間が60%から98%に減少したそうです。
しかしまだ改善の余地があり、webpack5でビルド時間はさらに短縮される予定のようです。

新機能の追加(モード設定)

今回、webpack4で新たにモードという新しい設定機能が追加されました。
こちらの設定は必須で、設定をしないとエラーがでるようです。
選択肢は、development(開発)とproduction(本番)の2つから選べます。
設定をすることで、得られるメリットは以下の通りです。

開発

  • ブラウザのデバッグ用ツール
  • 迅速な開発サイクルのための高速インクリメンタルコンパイル
  • 実行時に役立つエラーメッセージ

本番

  • 小さな出力サイズ
  • 実行時の高速コード
  • 開発専用コードの省略
  • ソースコードまたはファイルパスを公開しない
  • 使いやすい出力アセット

以上の設定をした後も、細かく設定出来ます。
僕が気になったのは、3つほどです。

devtool

こちらの設定をオンにすると、SourceMapsがデバッグされ綺麗なコードで出力されます。(デフォルトはオフです。)
ただ、ビルド時間が遅くなるので、品質と速さのどちらを取るのかは、あなたが決めてねとのことです。

cache

これは、developmentモードにすると有効になります。
モジュールをキャッシュし、変更がなければ再構築しないようにします。
この設定はwatch中に力を発揮するようで、より早いビルドを体感することができます。

optimization.minimize

productionモードで有効になります。
出力アセットを最小限にするには、optimize.minimizerで可能です。
デフォルトはuglify-jsを使用します。

その他、細かく設定が可能ですが記事には、サイト自体が大規模化するなら細かく設定した方が良いよと書いてあるので、最初はdevelopmentとproductionの設定だけで大丈夫かと思います。

CommonsChunkPluginの設定が要らなくなった

CommonsChunkPluginの設定が要らなくなりました。
こちらは、新機能のモード設定でオンオフの切り替えが可能です。
デフォルトはオンになっているので、ここはかなり楽になったのではないでしょうか?

WebAssemblyがサポートされました

これで、Rust、C ++、CなどのWebAssemblyホストlangファイルを直接インポートできるローダーを作成することも出来るようになりました。
しかし、これはまだ実験段階のようで次にリリースされるwebpack5で安定させるとのことです。

モジュールタイプの導入+ .mjsサポート

今回、5つのモジュールタイプが実装されました。

  • javascript/auto: (webpack 3のデフォルトのもの)すべてのモジュールシステムが有効なJavaScriptモジュール:CommonJS、AMD、ESM
  • javascript/esm: EcmaScriptモジュール、他のすべてのモジュールシステムは使用できません(.mjsファイルのデフォルト)
  • javascript/dynamic: CommonJS&AMDのみ; EcmaScriptモジュールは使用できません
  • json: JSONデータは、requireとimport(.jsonファイルのデフォルト)を介して利用できます。
  • webassembly/experimental: WebAssemblyモジュール(現在は実験的で、.wasmファイルのデフォルト)
  • さらに、webpackは、.wasm.mjs.js、および.jsonの拡張子をこの順に探して解決します

この機能のいいところは
CSSとHTMLモジュールのタイプ(webpack 4.x〜5の予定)で作業を続けることができることです。

HtmlWebpackPluginを使用する場合

以下のコマンドで実行可能です。

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

どうやら担当のJan Nicklasさん(https://medium.com/@jantimon )がいないようで、海外から帰国後マージする予定と書いています。
何か問題があれば、こちらからissueに上げてくださいとのことです。
https://github.com/webpack-contrib/html-webpack-plugin

その他

今回、リリース記事で書かれていたことは以上ですが、まだまだ改善されている箇所があるそうです。
詳しくはこちらの記事を参考にしてください。
https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0

v4のドキュメントはありますか?

完成までもうちょっとなので、もう少し待ってねとのことです。
途中まではこちらから確認出来ます。
https://github.com/webpack/webpack.js.org/issues/1706

framework-cliは大丈夫?

サポート出来るように、各フレームワークで作業をしたので大丈夫だよとのことです。
どうやら、AngularCLIチームは、webpack 4を使用して、次のメジャーバージョンを(1週間ほどで)出す計画も立てているそうです。

webpack5では何するの?

前回webpack3をリリースした時もwebpack4でやることは決まっていると書いてありました。
今回のアップデートでやると書いてあったことが反映されていたので、次のアップデートも期待して良いんじゃないでしょうか。

前回

  • より良いビルドキャッシング
  • より速い初期および増分ビルド
  • 優れたタイプスクリプト体験
  • 改良された長期キャッシング
  • WASMモジュールのサポート
  • ユーザーエクスペリエンスの向上

今回

  • ESMモジュールターゲット
  • 永続的なキャッシュ
  • WebAssemblyのサポートを実験的から安定的に移行します。ツリーシェイキングとデッドコードの削除を追加!
  • プリセット - 0CJSを拡張すると、何もゼロ設定になります。彼らはそうすべきだ。
  • CSSモジュールタイプ - エントリとしてのCSS(Goodbye ExtractTextWebpackPlugin)
  • HTMLモジュールタイプ - エントリとしてのHTML URL /ファイルモジュールタイプ
  • URL /ファイルモジュールタイプ
  • <あなた自身を作成する>モジュールタイプ
  • マルチスレッド
  • 組織憲章と理念宣言の再定義
  • Google Summer of Code(別途投稿予定)!!!

以上です。
長文にお付き合いいただきありがとうございました。

引用元

webpack4
https://medium.com/webpack/webpack-4-released-today-6cdb994702d4
https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
webpack4(β版)
https://medium.com/webpack/webpack-4-beta-try-it-today-6b1d27d7d7e2
https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0
webpack3
https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.