KDE BLOG

Webデザインやコーディングについて書いています

webpack

【webpack速習】vol.13: Build Performance

下記ページのざっくりとした翻訳。 webpack.js.org General Stay Up to Date(最新に保つ) Loaders Bootstrap Resolving Dlls Smaller = Faster Worker Pool Persistent cache(永続キャッシュ) Development Incremental Builds Compile in Memory stats.t…

【webpack速習】vol.12: Environment Variables

下記ページをざっくりとまとめます。 webpack.js.org 概要 問題点 cross-envの使い方

【webpack速習】vol.11: TypeScript

下記ページをざっくりとまとめます。 webpack.js.org Basic Setup Loader Source Maps Using Third Party Libraries Importing Other Assets

【webpack速習】vol.10: Caching

下記ページをざっくりまとめます。 webpack.js.org Output Filenames Extracting Boilerplate Module Identifiers

【webpack速習】vol.9: Lazy Loading

下記ページをざっくりまとめます。 webpack.js.org Example Frameworks

【webpack速習】vol.8: Code Splitting

下記ページの要点をまとめていきます。 webpack.js.org Entry Points Prevent Duplication(重複を防ぐ) Dynamic Imports(動的インポート) async function を使う Prefetching/Preloading modules Bundle Analysis(バンドル分析)

【webpack速習】vol.7: Production

下記ページの要点をまとめていきます。 webpack.js.org 本番サイトまたはアプリケーションを構築するためのベストプラクティスとユーティリティについて説明。 セットアップ npm scripts webpack.common.js で設定済みのプロパティに、webpack.prod.js ある…

【webpack速習】vol.6: Tree Shaking

下記ページの要点をまとめます。 webpack.js.org また一部を下記ページより引用、大いに参考にさせていただいています。 www.kabuku.co.jp tree shakingとは 実際に試してみる tree shaking を有効にする 関数をexport するファイルを作る 関数を import す…

【webpack速習】vol.5: Hot Module Replacement

webpack.js.org 上記ページの要点をまとめていきます 概要 HMRはどのように機能するか 1. アプリケーションにおいて 2. コンパイラにおいて 3. モジュール内において 4. ランタイム(実行)時において はじめかた HMRの使い方 HMRを有効にする webpack.confi…

【webpack速習】vol.4: Development

下記ページの要点になります。 webpack.js.org 開発時に役立つ機能のガイドページになります。 コードを自動的にコンパイルし、簡単な開発サーバを実行する内容です。 development mode source maps を使う 開発ツールの選択 watch モードを使う webpack-dev…

【webpack速習】vol.3: Output Management

下記ページの要点をまとめていきます。 webpack.js.org ざっくりいうと、出力されたバンドルファイルの読み込みを自動で行うようにするためにhtmlの生成を動的にするガイドです。 概要 準備 エントリーポイントとアウトプットの設定を修正 HtmlWebpackPlugin…

【webpack速習】vol.2: Asset Management

今回は下記ページの要点をまとめていきたいと思います。 webpack.js.org CSSを読み込む 補足 画像の読み込み フォントファイルを読み込む csvやxmlなどのデータファイルを読み込む グローバルなアセット

【webpack速習】vol.1: 概要 & Getting Started

個人ではなんとなくコピペで使っていたwebpack。 会社業務で使っている webpack のビルドを早くしたいのだけれど、ちゃんと webpack について理解しておらず設定ファイルをうまくいじれないのが悔しいので、ちゃんと1から学ぼうと思います。 volいくつまで続…