KDE BLOG

バイブス

【webpack速習】vol.7: Production

下記ページの要点をまとめていきます。

webpack.js.org

本番サイトまたはアプリケーションを構築するためのベストプラクティスとユーティリティについて説明。

  • セットアップ
    • npm scripts
    • webpack.common.js で設定済みのプロパティに、webpack.prod.js あるいは webpack.dev.js で追加するには
  • Specify the Mode(モード指定)
  • Minification(圧縮)
  • Source Mapping(ソースマッピング
  • Minimize CSSCSSの圧縮)
  • CLI Alternatives(CLIの選択肢)
続きを読む

【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.js.org

上記ページの要点をまとめていきます

  • 概要
  • HMRはどのように機能するか
    • 1. アプリケーションにおいて
    • 2. コンパイラにおいて
    • 3. モジュール内において
    • 4. ランタイム(実行)時において
    • はじめかた
  • HMRの使い方
    • HMRを有効にする
    • webpack.config.js で設定しない場合
    • HMRが難しい場合がある
  • CSSのHMR
  • まとめ
続きを読む

【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

下記ページの要点をまとめていきます。

webpack.js.org

ざっくりいうと、出力されたバンドルファイルの読み込みを自動で行うようにするためにhtmlの生成を動的にするガイドです。

  • 概要
  • 準備
    • エントリーポイントとアウトプットの設定を修正
  • HtmlWebpackPlugin
    • テンプレート機能を試してみる
  • clean-webpack-plugin で /dist フォルダの掃除
続きを読む

【webpack速習】vol.2: Asset Management

今回は下記ページの要点をまとめていきたいと思います。

webpack.js.org

  • CSSを読み込む
    • 補足
  • 画像の読み込み
  • フォントファイルを読み込む
  • csvxmlなどのデータファイルを読み込む
  • グローバルなアセット
続きを読む