Fitten Code写Webpack配置：快速配置Loader与Plugin提高打包效率

Fitten Code 确实是个好帮手——想快速生成一份能直接跑的 Webpack 5 配置，顺便把 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 规则没地方挂。需要强调的是：

。别指望它一步到位，后面还得手动填充。

为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 正则里的扩展名。

为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提升构建质量

在 Fitten Code 中搜“html plugin auto inject”，选中后插入插件实例。它会自动创建 index.html 并注入 bundle.js 和 main.css，省去手动写 HTML 模板的麻烦。

插入插件时勾选“clean before build”，生成代码为 new CleanWebpackPlugin()。这能防止上一次打包残留的 dist 文件干扰当前结果——每次构建时自动清空输出目录，干净利落。

这个插件建议只在 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。