Webpack 配置生成器
生成 webpack.config.js：可选入口与输出、ts / babel / css / sass / 静态资源 loader、HtmlWebpackPlugin 等插件，以及 HMR、historyApiFallback、代理等 devServer 设置。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
基础设置
入口、输出与模式决定了配置骨架。
Loader
按项目实际用到的文件类型勾选，未勾选的类型不会出现在 rules 里。
插件
devServer
生成的配置
webpack.config.jswebpack, webpack-cli, typescript, ts-loader, css-loader, style-loader, html-webpack-plugin, webpack-dev-serverconst path = require('node:path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|webp|woff2?)$/,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' }),
],
devServer: {
hot: true,
},
};
这个工具能做什么
- 接手一个只有 src 目录的老项目，想快速补出可运行的 webpack 配置：勾一遍文件类型就得到完整的 module.rules。
- 从 webpack 4 升级到 5 时对照配置：静态资源改用 asset/resource、代理改成数组写法，都能在这里生成后比对。
- 前后端分离调试时把 /api 转发到本地后端，并打开 historyApiFallback 让前端路由刷新不再 404。
- 教学或分享时快速演示 loader 与 plugin 的区别：勾掉某个 loader，看 rules 与 plugins 数组如何变化。
示例
输入
模式 development，入口 ./src/index.ts，输出 dist，勾选 TypeScript / CSS / 静态资源 / HtmlWebpackPlugin / HMR
输出
const path = require('node:path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: "ts-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpe?g|gif|svg|webp|woff2?)$/,
type: "asset/resource",
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: './public/index.html' }),
],
devServer: {
hot: true,
},
};把模式切成 production，filename 会自动变成 [name].[contenthash].js，devtool 也会关掉；换成 ./src/main.js 之类不存在的入口不会报错，工具只校验路径写法。
常见问题
为什么勾了「抽离 CSS」还要先勾 CSS 或 Sass？
MiniCssExtractPlugin 只替换样式规则里的 style-loader，没有样式规则时它抽不出任何东西，生成的配置里会留下一个永远不生效的插件。所以工具会直接拦下并提示，避免出现「配置了却没效果」的困惑。
asset/resource 和 url-loader、file-loader 有什么区别？
asset/resource 是 webpack 5 内置的资源模块类型，等价于 file-loader；asset/inline 等价于 url-loader；asset 则会按体积阈值自动二选一。用 webpack 5 就不必再装 file-loader 或 url-loader 了。
devServer.proxy 为什么是数组？
webpack-dev-server 5 起把 proxy 改成数组形式，每项用 context 指定要匹配的前缀；旧的 `{ "/api": { target } }` 对象写法已废弃。这里生成的正是新写法，升级时可以直接替换。
生成的配置能直接 npm start 吗？
配置本身语法完整，但入口文件、public/index.html 模板以及结果区列出的依赖都要先准备好，package.json 里的 scripts 也要自己加（例如 "start": "webpack serve"）。工具不写任何文件，也不猜你的目录结构。
可以把它当成 webpack 的「最佳实践」吗？
它给的是一份保守、可读的基线：生产环境才加 contenthash、开发环境才开 HMR 与 source map。真实项目通常还要考虑缓存组、代码分割、CSS 压缩等，建议把它当作起点再按需扩展。
关键词：webpackwebpack configwebpack.config.jswebpack 配置loaderdevServer打包配置html-webpack-plugin前端工程化webpack 生成器