关于 webpack
webpack 技能为使用 Webpack 打包 JavaScript、CSS 和资源的开发者提供配置与优化指导，涵盖 loader、plugin、多入口及开发服务器等主题。
主要功能
- 01配置入口、输出与模块规则
- 02设置 loader 和 plugin
- 03处理多入口和代码分割
- 04配置缓存、HMR 与环境变量
- 05参考生产压缩和 tree-shaking 实践
适用场景
- 01配置 JavaScript 与 CSS 打包
- 02为多入口项目设置代码分割
- 03排查 loader 顺序或构建优化问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/webpack确认已加载。
附带文件agents/openai.yamlLICENSE.txt
详细介绍
何时使用此技能
当用户想要：
- 使用 Webpack 打包 JS/CSS/资源，配置 loader、plugin 和优化
- 处理多入口、代码分割、缓存和 dev server
如何使用此技能
- 配置：entry、output、module.rules（babel、css、file）；plugins（HtmlWebpackPlugin、MiniCssExtract）。
- 进阶：splitChunks、懒加载、devtool、HMR；环境变量和 mode。
- 参考：https://webpack.js.org/
最佳实践
- 注意 loader 顺序和 exclude；生产环境压缩与 tree-shaking。
- 大型项目可考虑 Vite 或 Rspack；关注缓存和构建速度。
关键词
webpack、打包、loader、plugin、代码分割
评论
支持 Markdown