无需登录 数据私有 本地保存

Webpack 配置向导 - 问答式生成配置文件

构建工具 生成器 Webpack 向导 生成 配置
25
0
0
0
1
基础设置
2
JS配置
3
样式处理
4
HTML
5
DevServer
6
优化调试
7
生成配置

步骤 1 / 7

已复制到剪贴板

常见问题

Webpack 的核心配置包括：entry（入口起点）、output（输出配置）、module.rules（Loader 规则）、plugins（插件）、resolve（模块解析）、devServer（开发服务器）、devtool（Source Map 配置）和 optimization（优化策略）。本向导会引导您逐步完成这些配置。

有两种主流方案：
① 单独使用 ts-loader，直接编译 TypeScript；
② 使用 babel-loader + @babel/preset-typescript，由 Babel 处理类型剥离，速度更快但不做类型检查（需配合 tsc --noEmit 单独检查类型）。本向导在同时勾选 TS 和 Babel 时，会生成方案②的配置。

使用 MiniCssExtractPlugin 可以将 CSS 从 JS 中提取为独立的 .css 文件。这样做的好处是：减少 JS 文件体积、支持并行加载 CSS 和 JS、更好地利用浏览器缓存、避免样式闪烁（FOUC）。在生产环境中强烈推荐启用。

  • eval-cheap-module-source-map：快速重建，适合开发环境（推荐）；
  • source-map：完整独立的 .map 文件，构建慢但最准确，适合生产；
  • hidden-source-map：生成 map 但不引用，适合生产环境隐藏源码；
  • nosources-source-map：只映射行列信息，不暴露源码内容；
  • false：不生成 source map，构建最快。

Webpack 5 通过 optimization.splitChunks 配置代码分割。常用策略是将 node_modules 中的第三方库提取到单独的 vendors chunk 中，减少主入口文件体积，并利用浏览器缓存加速二次加载。本向导启用后会自动生成常用的 splitChunks 配置。
🔧 相关工具