⚡ Webpack配置生成器
免费在线Webpack配置生成器，可视化配置入口、输出、Loader、插件、拆分策略，一键生成webpack.config.js。无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用⚙️ 基础配置
❓ Webpack配置生成器能做什么？
通过可视化界面生成webpack.config.js配置文件，支持入口出口、Loader、插件、代码拆分、Source Map等配置。
❓ 支持哪些Loader？
支持babel-loader、ts-loader、css-loader、style-loader、sass-loader、less-loader、postcss-loader、file-loader、url-loader等。
❓ 支持哪些插件？
支持HtmlWebpackPlugin、MiniCssExtractPlugin、DefinePlugin、CleanWebpackPlugin、ESLintPlugin、ForkTsCheckerPlugin等。
❓ 支持代码拆分吗？
支持配置splitChunks策略，包括按vendors/common模式拆分、自定义chunk大小和缓存组。
❓ 生成的文件可以直接使用吗？
可以。生成的webpack.config.js兼容Webpack 5语法，包含所有必要配置项和增强的resolve/module配置。
❓ 数据会上传吗？
不会。所有处理在浏览器本地完成，数据不上传服务器。
Webpack配置生成器能做什么？
Webpack配置生成器是一款免费在线工具，帮助开发者通过可视化界面快速生成webpack.config.js配置文件。支持入口输出配置、Loader选择、插件管理、代码拆分策略和高级设置。所有配置在浏览器本地完成，无需安装Node.js或Webpack CLI，数据绝不上传服务器。
核心功能
- Loader管理: 一键启用babel-loader、ts-loader、css-loader、sass-loader、less-loader、postcss-loader等常用Loader并自动配置规则
- 插件配置: 支持HtmlWebpackPlugin、MiniCssExtractPlugin、DefinePlugin、CleanWebpackPlugin等主流插件，自动生成实例化代码
- 代码拆分: 可视化配置splitChunks策略，设置chunks类型、最小尺寸、缓存组和vendors分包
- Source Map: 多种devtool选项，开发环境推荐eval-source-map，生产环境可选择none/source-map
- Resolve配置: 自定义路径别名(alias)和文件扩展名(extensions)，简化模块导入路径
使用教程
1. 选择模式(development/production)和目标平台(web/node/browserslist)
2. 配置入口文件路径、输出目录、输出文件名和公共路径
3. 勾选项目需要的Loader（babel、TypeScript、CSS预处理等）
4. 选择需要的Webpack插件并配置环境变量
5. 配置代码拆分策略和Source Map选项
6. 点击"生成配置"查看结果，复制或下载到项目根目录
应用场景
场景1：新前端项目初始化
创建新React/Vue项目时快速生成Webpack配置，省去手动编写配置文件的时间，避免遗漏常用Loader和插件。
场景2：项目迁移升级
从Webpack 4迁移到5时，使用生成器快速重建配置，确保使用最新的最佳实践和API。
场景3：学习Webpack配置
通过可视化界面理解Webpack各配置项的作用，调整参数观察生成结果的变化，加速学习曲线。
场景4：微前端模块配置
为微前端架构中的子应用生成独立的Webpack配置，配置不同的output.library和externals。
扩展知识
Webpack是当今最流行的前端打包工具之一。核心概念包括入口(entry)指定打包起点；输出(output)定义打包结果的文件名和路径；Loader让Webpack能处理非JS文件(如CSS、图片、TypeScript)；插件(plugin)执行更广泛的任务如HTML生成、CSS提取、环境变量注入。Webpack 5引入了持久化缓存、模块联邦(Module Federation)和更好的Tree Shaking支持。合理使用splitChunks可以将公共依赖提取到独立chunk，减少重复加载，优化缓存利用率。