Fitten Code可快速生成Webpack 5基础配置并精准配对loader与plugin：先用“Webpack 5 Minimal Config”建骨架，再通过“css loader chain”添加CSS/SCSS规则，注意use顺序为style→css→sass；用“babel + ts webpack”启用JS/TS转换，确保babel-loader在ts-loader前；最后用HtmlWebpackPlugin、CleanWebpackPlugin、MiniCssExtractPlugin提升构建质量。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想用Fitten Code快速生成可运行的Webpack配置，把loader和plugin一次性配对到位，避免手动写错顺序、漏装依赖、环境不匹配导致打包失败。
用Fitten Code生成基础配置骨架
打开Fitten Code网页或VS Code插件界面，在搜索框输入“webpack config starter”，选择官方推荐的“Webpack 5 Minimal Config”模板。
点击“Generate & Copy”后，粘贴到项目根目录下的webpack.config.js中，此时已包含entry、output、mode和空的module.rules与plugins数组。
这一步必须做，否则后续loader规则无法挂载——【Fitten Code生成的配置默认不带任何loader或plugin，仅提供结构】。
为CSS/SCSS文件添加Loader链
方法一：一键插入预设规则
在Fitten Code中搜索“css loader chain”，选中“CSS + SCSS + SourceMap”，点击插入。它会自动在module.rules中追加如下块：
{ test: /\.(css|scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
方法二：手动补全并修正执行顺序
注意：Fitten Code生成的use数组是按从左到右书写，但Webpack实际执行顺序是从右到左。所以sass-loader必须放在最后，style-loader必须放在最前——否则编译会中断，浏览器看不到样式。
安装对应依赖：npm install -D style-loader css-loader sass-loader sass。
若项目用的是Less，把sass-loader换成less-loader，并安装less包；别忘了同步改test正则里的扩展名。
Fitten Code 1.0.3是一款由清华博士团队打造的AI编程助手，基于国产计图（Jittor）深度学习框架开发。它支持VS Code、JetBrains系列等主流IDE及80多种编程语言。核心功能包括智能代码补全、注释生成、代码解释、Bug检测、单元测试生成等，旨在全方位提升开发效率。该工具对个人用户免费开放。
为JS/TS代码启用Babel与类型检查
第一步：在Fitten Code中搜索“babel + ts webpack”，选择“ES6+ to ES5 + TypeScript Support”模板。
第二步：将生成的rule插入module.rules，确保test匹配/\.(js|ts)$/，且exclude包含/node_modules/。
第三步：执行npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react ts-loader typescript。
第四步：检查use数组是否含两个loader——babel-loader必须在ts-loader之前，否则TypeScript类型不会被剥离，Babel会报错“Unexpected token interface”。
添加3个高频Plugin提升构建质量
方法1：HTML自动生成（HtmlWebpackPlugin）
在Fitten Code中搜“html plugin auto inject”，选中后插入插件实例，它会自动创建index.html并注入bundle.js和main.css。
方法2：旧产物清理（CleanWebpackPlugin）
插入插件时勾选“clean before build”，生成代码为new CleanWebpackPlugin()。这能防止上一次打包残留的dist文件干扰当前结果。
方法3：CSS单独抽离（MiniCssExtractPlugin）
仅在mode: 'production'下启用——开发时用style-loader注入DOM更利于热更新，生产环境抽离CSS可减少JS体积、支持并行加载。Fitten Code会自动加if (process.env.NODE_ENV === 'production')条件判断。
安装依赖：npm install -D html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin。
