【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 フォルダの掃除
【webpack速習】vol.2: Asset Management
今回は下記ページの要点をまとめていきたいと思います。
続きを読む【webpack速習】vol.1: 概要 & Getting Started
個人ではなんとなくコピペで使っていたwebpack。
会社業務で使っている webpack のビルドを早くしたいのだけれど、ちゃんと webpack について理解しておらず設定ファイルをうまくいじれないのが悔しいので、ちゃんと1から学ぼうと思います。
volいくつまで続くかわかりませんが、ひとまず今回は、webpackの概要と、実際に動かしてみるところまで。
基本的なスタンスとしては、参考情報はwebpackの公式ドキュメントをベースにしつつ、その他随時ググった記事を頼りにしていきたいと思います。
うまくまとめるというよりはログを残す感じになるので雑な内容になるかもしれませんのであしからず。
- webpackとは何か
- webpackの本質
- webpackと似たもの
- webpackの基本要素
- 実際に動かす
- "private": true の意味
- npm install --save ? npm install --save-dev ?
- config ファイルを作成
- 参考