mcpField
W
webpack

webpack

github.com/full-stack-skillsDevelopment063 installsUpdated 5w ago
Repository

About webpack

The webpack skill guides developers configuring Webpack to bundle JavaScript, CSS, and other assets. It covers loaders, plugins, multi-entry builds, code splitting, and development-server topics.

Key features

  1. 01Configure entry, output, and module rules
  2. 02Set up loaders and plugins
  3. 03Handle multiple entries and code splitting
  4. 04Configure caching, HMR, and environment variables
  5. 05Apply production minification and tree-shaking practices

Use cases

  1. 01Configure JavaScript and CSS bundling
  2. 02Set up code splitting for multi-entry projects
  3. 03Address loader order or build optimization issues

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/full-stack-skills/build-skills --skill webpack

After installing, type/webpackin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlLICENSE.txt

Details

From the project README

When to use this skill

Use this skill whenever the user wants to:

  • 用 Webpack 打包 JS/CSS/资源、配置 loader、plugin 与优化
  • 处理多入口、代码分割、缓存与 dev server

How to use this skill

  1. 配置：entry、output、module.rules（babel、css、file）；plugins（HtmlWebpackPlugin、MiniCssExtract）。
  2. 进阶：splitChunks、懒加载、devtool、HMR；环境变量与 mode。
  3. 参考：https://webpack.js.org/

Best Practices

  • loader 顺序与 exclude；生产压缩与 tree-shaking。
  • 大项目考虑 Vite 或 Rspack；缓存与构建速度。

Keywords

webpack, 打包, loader, plugin, 代码分割

Comments

Markdown supported