読者です 読者をやめる 読者になる 読者になる

だれも聞いていないと思って歌え

dance as if no one’s watching, sing as if no one’s listening, and live everyday as if it were your last.

webpack を v1 から v2 へ更新してみた

webpack はまだ勉強できていないですが、
webpack 2 が正式リリースされ、更新する機会があったのでその時のメモです。

webpack とは

webpack は WebApp に必要なリソースの依存関係を解決し、アセット(配布物)を生成するビルドツール(要するにコンパイラ)です。
JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。
WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした(少なくとも、自分はそうでした)。
webpack を使えば、Grunt も Gulp も必要ありません!覚えるべきことはほとんどありません。(必要なら)簡単な設定ファイルを書いて webpack コマンドを実行するだけです。
引用: webpack で始めるイマドキのフロントエンド開発 - Qiita

webpack.js.org

参考にしました

webpack-strem を使っていて、 webpack-stream が v2 に対応していないため、新機能の tree-shaking 周りはまだ全く触れていません。

webpack.js.org

stackoverflow.com

また、こちらの記事に変更点などが要約されています。

yosuke-furukawa.hatenablog.com

その他

DedupePlugin

参考サイトを元に修正後、 webpack を実行すると DedupePlugin でエラーが発生しました。 公式ページ内では特に明記されていなかったですが、 Qiita の記事で少し言及されていました。

また、 OccurenceOrderPluginの名前がv2からはOccurrenceOrderPluginに変更、 DedupePluginがなくなるなどがあります。 詳しくはwebpack/releasesのBreaking Changesを探すとわかると思います。

qiita.com

webpack/releases に書かれていることは確認できませんでしたが、 GitHub Issues に経緯などが書かれていました。

github.com

これらを参考に、 DedupePlugin の記述を削除したらエラーが無事取れました!

しかし、コンパイラ後のファイルサイズが大きくなっているものも多く、効果はまだあまり見えていません。。

DeprecationWarning

./node_modules のフォルダを消して、 npm install を実行し直したところ次のような警告が表示されました。

(node:34505) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

こちらも GitHub Issues に記述がありました。

github.com

どうやら、これは ts-loader などの loader 開発者のための警告だそうです。 webpack2 への移行に伴い仕様が一部変更になり、非推奨となった部分に関して警告が表示されているようです。 (英語の読解力に自信が無いので、ふわっとだけ認識してもらえると助かります)

issue にも書かれていますが( この辺り )、 webpack.js に process.noDeprecation = true; を設定することで警告は除去できました。 ただし、確認するべき警告まで表示されなくなってしまうことを懸念して、業務ではこの設定を行うことはやめました。