SuperAPI AI 工具集

webpack

前端与建站

查看项目

更新于 10-15 23:33

技能介绍

用途:Webpack 是模块打包工具,用于把项目中的各类模块与资源打包成可部署产物,核心能力包括 loader、插件、代码分割、优化与缓存失效处理。适合配置复杂项目的打包、为不同文件类型设置 loader、实现代码分割与懒加载、优化包体积与性能,以及维护使用 Webpack 的遗留项目。资料建议现代项目优先考虑 vite,简单静态站点也不适用。

主要能力与约定:为不同文件类型配置 loader;实现代码分割;优化包体积;区分开发与生产模式;用插件扩展功能。关键模式要求:输出文件名使用 contenthash 做长期缓存,例如 filename: "[name].[contenthash].js";通过 optimization.splitChunks.chunks: "all" 做自动代码分割;按 mode 区分开发与生产配置,如 devtool 在生产用 source-map、开发用 eval-source-map。

使用方式(决策参考):TypeScript 用 ts-loader 或带 TypeScript preset 的 babel-loader;CSS/SCSS 用 style-loader + css-loader(SCSS 再加 sass-loader);图片/字体用 asset/resource 或 asset/inline;代码分割配置 splitChunks 并使用动态 import();构建慢可启用 cache、用 thread-loader 并行;需要开发服务器用 webpack-dev-server 与 HMR;分析包用 webpack-bundle-analyzer。

边界情况:tree shaking 需 ES6 导入导出并在 package.json 设 sideEffects: false;循环依赖需重构打破;内存不足可设 NODE_OPTIONS=--max-old-space-size=4096;微前端用 ModuleFederationPlugin;source map 可选 source-map 或 hidden-source-map。

限制:资料未提供具体版本、安装命令、收费与价格信息,暂未提供。