【webpack速習】vol.8: Code Splitting
下記ページの要点をまとめていきます。
- Entry Points
- Prevent Duplication（重複を防ぐ）
- Dynamic Imports（動的インポート）
- async function を使う
- Prefetching/Preloading modules
- Bundle Analysis（バンドル分析）
【webpack速習】vol.6: Tree Shaking
下記ページの要点をまとめます。 webpack.js.org
また一部を下記ページより引用、大いに参考にさせていただいています。 www.kabuku.co.jp
- tree shakingとは
- 実際に試してみる
- tree shaking を有効にする
- 関数をexport するファイルを作る
- 関数を import するファイルを作る
- tree shaking 無効にしてビルドした場合
- tree shaking 有効にしてビルドした場合
- ここまでのまとめ
- Production モードでも不要なコードが含まれてしまう
- 副作用（side effect）とは
- 副作用がないことをwebpackに伝える
- package.json に sideEffects プロパティを指定
- 検証
- まとめ
- 参考
【webpack速習】vol.5: Hot Module Replacement
【webpack速習】vol.4: Development
下記ページの要点になります。 webpack.js.org
開発時に役立つ機能のガイドページになります。
コードを自動的にコンパイルし、簡単な開発サーバを実行する内容です。
- development mode
- source maps を使う
- 開発ツールの選択
- watch モードを使う
- webpack-dev-server を使う
- webpack-dev-middleware を使う
- webpack-dev-middleware と express サーバを組み合わせた例
【webpack速習】vol.3: Output Management
下記ページの要点をまとめていきます。
ざっくりいうと、出力されたバンドルファイルの読み込みを自動で行うようにするためにhtmlの生成を動的にするガイドです。
- 概要
- 準備
- エントリーポイントとアウトプットの設定を修正
- HtmlWebpackPlugin
- テンプレート機能を試してみる
- clean-webpack-plugin で /dist フォルダの掃除
