webpack簡単まとめ

はじめに

  • react + echo でSPAを作るぞ、と意気込んだものの色々分からないので、ちょっとずつ進めていく。
  • 自分のレベルはcreate-react-appでTODOアプリくらいは作ってみたけど、なんで動いているのかよく分かっていないよ、くらい
    • node、npmはこの前簡単にまとめてみたのでなんとなく分かる
  • 公式ドキュメントのGuidesを進めていく中で、覚えときたいところ、よく分からなかったところ、忘れそうなところのメモ書き。
  • 具体的なコードは書かないのでモジュール名などでググるべし

Asset Management

  • webpack.config.jsにwebpackの設定を追加していく
  • npm管理されている各種loader(style-loaderなど)をconfig追加すると、各種ファイルをバンドルできる

Output Management

  • jsやcssファイルがバンドルされる際、ファイル名がハッシュになるが、htmlファイルが参照するファイル名は変わらないという問題が発生する
  • html-webpack-pluginを使おう
    • コンパイル毎にファイル名のハッシュが変更されてしまうのを解決してくれる
  • 使われないファイルが出力先フォルダに増えていく問題に対しては、clean-webpack-pluginを使うと、使わないやつを消してくれる。

Development

  • バンドルしたファイルでエラーが起こったとき、バンドル前のどのファイルでエラーが起こったか分からない?
    • webpackのinline-source-mapオプションを使うと、元ファイルのエラーを表示してくれる
  • ファイル変更する度にビルドし直すの面倒だよね?3つの解決方法がある
    1. webpackのwatchモードを使う
      • ファイルに変更があるとコンパイルし直してくれる
      • しかし、ブラウザで表示する場合にはリロードが必要
    2. webpack-dev-serverを使うと、webサーバーを立ち上げてくれて、ファイルに変更があると、コンパイル・リロードを自動でやってくれる
    3. webpack-dev-serverでは、webpack-dev-middlewareを内部的に使っている
      • webpack-dev-middlewareを切り出してカスタマイズして使うことも可能。
    4. とりあえず最初は2の方法でいいのではないかと思う。

Code Spliting

出力されるjsファイルを分割する方法は3つ。

  • ぱっと見は2が良さそう

  • Entry Pointsを分けること

    • webpack.config.jsファイルのentryを複数指定する
    • 簡単で直感的だが、複数ファイルで重複したモジュールがバンドルされる可能性がある

  • CommonsChunkPluginを使うこと

    • 重複したモジュールが1つの別ファイルに出力される

  • Dynamic imports で行うこと

    • インラインで読み込む

参考