きゅうり畑

気になった技術や勉強したことを書いていく

WebPack3.0をさらっと見てみる

まだWebPack2.0すら使いこなせていない感があるけど、3.0が来ましたね。
medium.com

重要そうな所を雑にまとめてみる。英語に強いわけではないので、Google先生の力を目一杯借りてます、誤訳とか誤認識とかも含まれます。
こんなことに使えそう!とかがあれば追記するかも

今回、リリースの目玉機能として発表されたのは2つ。
Scope HoistingMagic Comment

その1!Scope Hoisting

今まではJSをbundleするときに、同じファイル内でimportしてる各ファイルを機能ごとに分割させるために、さらに別の関数でラップしたりしてた。
でもECMAScriptの構文を利用することで、別の方法で機能分割することができるようになったから今までよりbundleしたファイルのサイズが小さくできるよ!
ということらしい。

その2!Magic Comment

実は2.4とか2.6からあった機能なんだけど、各ページで動的にbundleしたファイルを読み込ませようとするときに1.bundle.jsとかいうチャンク名でしか読み込めなくて結構分かりづらかった。
でも今回からは

import(/* webpackChunkName: "my-chunk-name" */ 'module');

って感じでチャンク名を指定できるようになったよ!
ということらしい。

ほんとにさらっと読んだだけなので、ちゃんと使ってみたりもうちょっとドキュメント読んだりしたらまた別の記事を書くかも