現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。vol.99から連載が始まりました&webpack3の補足こんにちは。エンジニアの穴井(@pirosikick)です。去年の10月よりヤフー黒帯制度にて、JavaScriptの黒帯をやっています。普段はヤフーの社内ベンチャー制度からできたリッチラボで福岡で働いていますが、ご飯がおいしすぎて太りました。vol.99より、ヤフーのフロントエンドエンジニアによる連載が始まりました!連載タイトルは「どんとこい!フロントエンド開発」です。ヤフーのフロントエンドエンジニアで、流れの速いWebフロントエンドで使われる技術を分かりやすく解説していきますので、どうぞよろしくお願いします!初回は「入門webpack2」を寄稿しました。webpackの基本から、webpack2で導入された新機能まで広くカバーした入門記事です。Mediumということで、webpack3について、本記事で補足させていただきます。Changeで、98%のユーザーは影響無くアップグレードできる」と書いており、webpack2からwebpack3に移行するに当たって苦労することはほぼなさそうです。vol.99のサポートページよりダウンロードいただけます)をwebpack3で検証しましたが、設定ファイルに関しては修正せずにwebpack2と同じように動作することを確認できました。install)時にWarningが出力されることがありましたが、babel-loaderやuglifyjs-webpack-pluginは既にwebpack3に対応したパッケージがリリースされており、パッケージのバージョンを上げれば問題ありませんでした。webpack-dev-serverはまだ対応中(6/28時点)のようですが、動作は問題なさそうに見えました。いう感じで、webpack2への移行が完了している場合は簡単にwebpack3に移行できます。注意が必要なのはプラグインを利用している場合ですが、メジャーなプラグインに関してはほぼ問題なさそうで、もしマイナーなプラグインを利用している場合はそのプラグインのIssueを確認するのがよさそうです。Hoistingは、日本語にすると「スコープ巻き上げ」です。言葉からはちょっとイメージが湧きにくいと思いますので、例を使って説明します。Hoistingが無効な状態での出力ファイルを確認します。下記のような、entry.jsとhello.jsを作成します。'./hello';hello();entry.jsをエントリーポイントとして、webpackを実行します。0.71s.上記設定ファイルでwebpackを実行すると、output.jsが出力されます。実際の出力ファイルとは異なります。})で囲われているのがわかると思います。Hoistingを有効にしてみましょう。Hoistingを有効にするには、ModuleConcatenationPluginを使います。webpack.config.jsのpluginsフィールドにModuleConcatenationPluginのインスタンスを追加し、webpackを実行します。0.79s.出力されるoutput.jsをもう一度確認してみます。実際の出力ファイルとは異なります。Hoistingを有効にしたoutput.jsでは、hello.js、entry.jsが結合され、同じスコープになっているのが確認できます。これが「スコープ巻き上げ」です。Hoistingによって、巻き上げた分だけ関数の実行回数が減ることになるのでアプリケーションの実行時間の短縮と、出力されるファイル容量の若干の削減が期待できます。昨今のnpmパッケージを活用したフロントエンド開発では、小さなモジュールを大量に読み込む可能性が高いので、アプリケーションが大きいほど効果が高そうです。ModulesをCommonJSのモジュール方式に変換している場合は、設定で無効にする必要があります。下記.babelrcを参考に設定してみてください。Replacementが使えない、無効時に比べるとビルドやコード圧縮に時間がかかる可能性がある、などのデメリットもあります。Hoisting有効時でも通常の方法にフォールバックすることもあるようで、手持ちのプロダクトで検証しましたがフォールバックされているモジュールがいくつかありました。webpack実行時に--display-optimization-bailoutフラグを付けるとフォールバックされているモジュールと原因となっているファイルがコンソールに出力されます。...個人的には、まだ実験段階なのかなという印象を受けたので、導入にはもう少し検証が必要に感じましたが、裏を返すと伸びしろがある機能でもあるので、今後の改善に期待です。commentはwebpack2.4から導入されたということを指摘いただきましたので、こちらに追記させていただきます。importを使ってモジュールを読み込むと、そのモジュールは他のモジュールとは別のファイルに出力され、必要になったタイミングでブラウザーにロードされます。この機能を使うことで、初期表示に必要のないモジュールを遅延してブラウザーにロードできるので、アプリケーションの初期ロード時間を短縮できます。importを利用するのに、babel-loader(babel-plugin-syntax-dynamic-import)を使う必要がありましたが、webpack3では不要です。importは標準サポートされていました。importの文法をパースするできるようにするためにbabel-plugin-syntax-dynamic-importが必要です。0.95s.上記の例では、main.bundle.jsと0.chunk.jsの2つが出力されます。HTMLにはmain.bundle.jsをscriptタグで読み込み、0.chunk.jsは必要になったタイミング(今回はcallHello関数が実行された時)にブラウザーに読み込まれます。webpack2では、動的に読み込まれるモジュールに付けられる名前が連番だったので、出力されるファイル名が0.chunk.jsなどの分かりづらい名前になっていました。commentと呼ばれる下記のようなコメントを入れることで、開発者が任意の名前を指定できます。0.79s.0.chunk.jsがhello.chunk.jsになってますね!動作を確認してみましょう。main.bundle.jsを読み込むだけのHTMLを用意し、ブラウザーで開きます。toolのコンソールからcallHello関数を呼び出すと、hello.chunk.jsが読み込まれているのがネットワークタブから確認できます。今回は出力されるファイルが1つですが、増えると連番ではどのファイルにどのモジュールが含まれているのかファイル名からは判別がつかず、デバッグが大変です。commentを活用しましょう。おわりwebpack3の変更点について、解説しました。「webpack2に移行したばかりなのに、もうwebpack3かよ」と思う方もいらっしゃるかもしれませんが、移行は簡単なので、試してみてください。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。