webpack はまだ勉強できていないですが、
webpack 2 が正式リリースされ、更新する機会があったのでその時のメモです。
webpack とは
webpack は WebApp に必要なリソースの依存関係を解決し、アセット(配布物)を生成するビルドツール(要するにコンパイラ)です。
JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。
WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした(少なくとも、自分はそうでした)。
webpack を使えば、Grunt も Gulp も必要ありません!覚えるべきことはほとんどありません。(必要なら)簡単な設定ファイルを書いて webpack コマンドを実行するだけです。
引用: webpack で始めるイマドキのフロントエンド開発 - Qiita
参考にしました
webpack-strem を使っていて、 webpack-stream が v2 に対応していないため、新機能の tree-shaking 周りはまだ全く触れていません。
また、こちらの記事に変更点などが要約されています。
yosuke-furukawa.hatenablog.com
その他
DedupePlugin
参考サイトを元に修正後、 webpack を実行すると DedupePlugin
でエラーが発生しました。
公式ページ内では特に明記されていなかったですが、 Qiita の記事で少し言及されていました。
また、 OccurenceOrderPluginの名前がv2からはOccurrenceOrderPluginに変更、 DedupePluginがなくなるなどがあります。 詳しくはwebpack/releasesのBreaking Changesを探すとわかると思います。
webpack/releases に書かれていることは確認できませんでしたが、 GitHub Issues に経緯などが書かれていました。
これらを参考に、 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 に記述がありました。
どうやら、これは ts-loader などの loader 開発者のための警告だそうです。 webpack2 への移行に伴い仕様が一部変更になり、非推奨となった部分に関して警告が表示されているようです。 (英語の読解力に自信が無いので、ふわっとだけ認識してもらえると助かります)
issue にも書かれていますが( この辺り )、 webpack.js に process.noDeprecation = true;
を設定することで警告は除去できました。
ただし、確認するべき警告まで表示されなくなってしまうことを懸念して、業務ではこの設定を行うことはやめました。