Webpack
2022-04-25
Webpackのドキュメント(Guides)を一通り通して読む(2022-04-25)
-
3種類ある
-
Concepts
- どんな機能があるか
-
Guides→今回はこれを読む
- 機能ごとに簡単なTutorialを含んだ内容
-
Configuration
- 実際の設定内容(辞書的)
-
Concepts
-
その他気になった所
-
デフォルトでsrc/index.jsしか無いのにhtmlファイルも作られる
-
target:webがデフォルトだから target:nodeにすればjsだけ作られる - HTMLWebpackPluginをpluginに追加すると、バンドルしたjsを使用するhtmlファイルが作成される
-
-
webpackはあくまでbundleツールでしか無い
-
import``exportはtranspileするがその他は手を加えない -
必要なら
bavelなどをローダーシステム経由で使用する必要がある
-
-
asset modules（画像）のloader
-
webpack4までは
file-loaderなどを使用していたが、asset typeを指定することで、出力タイプを切り替える -
jsと一緒にバンドル（リソースとして変換）してほしい場合は、js内でimportしてloaderなどを設定する
- 別の名前のファイルやdata:urlなどに変換されてdistに生成される
- 通常のアセットとして使いたい場合は、最初からdistに配置したり、別途ビルド時にコピーするなどしてserveディレクトリに配置して、普通に読み込みやfetchを記載する
-
webpack4までは
-
webpack-dev-serverは実ファイルは出力しない
- メモリ上にファイルを保存し、実際のファイルが有るかのようにサーバーパスにマウントする
-
outputオプションの
pathとpublicpath-
pathはwebpackの生成物の格納場所を単純に指定する -
publicpathはpluginが使用し、本番ビルド時のアセットのルートパスを指定する- 特に指定しなければローカルホストだけど、CDNのパスを指定すればURLが更新される
-
-
ローダーとプラグイン
- ローダーはバンドル前の個別のソースアセットに作用
- プラグインはバンドルファイルに作用し、バンドル生成過程の最終段階で動く
-
HMR
-
なんとなくまとめ
- Webpackによってアセットとは別にRuntime JSが生成される
- Webpack-devserverは、Assetsサーバ（jsファイルなどを取得)とWebsocketサーバを立ち上げる
- ソースコードの変更を検知してリコンパイルする
- Websocketサーバはリコンパイル結果をWebsocket通信でRuntime JSに通知する
- RuntimeJSがBandleに注入される
-
手動でも使える
- node.js APIを使ったカスタムサーバー経由でwebpackを使う場合など
- 副作用のあるコードなどを扱う場合は、リコンパイルの注入時の処理等を記載する必要がある
- 基本的にはプラグインに丸投げするのが吉
- Hot Module Replacementの設定と仕組みを理解する
- モジュールをHMRに対応するための実装について
-
なんとなくまとめ
-
デフォルトでsrc/index.jsしか無いのにhtmlファイルも作られる
月別アーカイブ