webpack について
webpackスキルは、JavaScript、CSS、各種アセットをバンドルする開発者向けに、Webpackの設定と最適化を案内します。ローダー、プラグイン、複数エントリー、コード分割などを扱います。
主な機能
- 01entry、output、module.rulesの設定
- 02ローダーとプラグインの設定
- 03複数エントリーとコード分割への対応
- 04キャッシュ、HMR、環境変数の設定
- 05本番圧縮とtree-shakingの実践
活用シーン
- 01JavaScriptとCSSのバンドル設定
- 02複数エントリープロジェクトのコード分割
- 03ローダー順序やビルド最適化の問題への対応
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/webpackを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlLICENSE.txt
詳細
このスキルを使用するタイミング
ユーザーが次のことを希望する場合は、このスキルを使用してください。
- Webpack を使用して JS/CSS/リソースをバンドルし、loader、plugin、最適化を設定する
- 複数のエントリーポイント、コード分割、キャッシュ、開発サーバーを扱う
このスキルの使用方法
- 設定：entry、output、module.rules（babel、css、file）、plugins（HtmlWebpackPlugin、MiniCssExtract）。
- 応用：splitChunks、遅延読み込み、devtool、HMR、環境変数、mode。
- 参考：https://webpack.js.org/
ベストプラクティス
- loader の順序と exclude、本番環境での圧縮とツリーシェイキング。
- 大規模なプロジェクトでは Vite または Rspack を検討し、キャッシュとビルド速度にも配慮してください。
キーワード
webpack、バンドル、loader、plugin、コード分割
コメント
Markdown 対応