https://createapp.dev/

Webpack 官网 → 配置 → 使用不同的配置文件 → createapp.dev

左侧选择：Vue
    ↓
右侧高亮显示：
├── vue-loader 配置
├── @vue/compiler-sfc
└── Vue 相关依赖

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

左侧选择：Tailwind CSS
    ↓
右侧高亮显示：
├── postcss-loader
├── tailwindcss
└── 相关配置

左侧选择：Transpilers → TypeScript
    ↓
右侧高亮显示：
├── ts-loader
├── typescript
└── tsconfig.json 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}

左侧选择：Images
    ↓
可选配置：
├── SVG（推荐）
├── PNG/JPG/GIF
└── 字体文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: 'asset/resource'
      }
    ]
  }
}

左侧选择：Lodash
    ↓
启用配置：
├── lodash-webpack-plugin
└── lodash-es（自动 Tree Shaking）

左侧选择：Prettier optimization
    ↓
Code splitting（代码分割）
├── splitChunks 配置
├── runtimeChunk 配置
└── 分离第三方库和公共模块

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
}

作用：生成 HTML 文件，自动引入打包后的 JS/CSS

适用场景：
├── 前端页面项目  推荐
└── 服务端项目     不需要

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]
}

作用：构建分析器，可视化分析打包体积

用途：
├── 查看哪些包体积较大
├── 发现可优化的模块
├── 分析是否有重复依赖
└── 优化方向参考

分析结果示例：
┌─────────────────────────────────────────┐
│ React (120KB) → 考虑 CDN 加载           │
│ Lodash (70KB) → 考虑按需引入            │
│ Moment.js (200KB) → 考虑 dayjs 替代     │
│ 公共代码重复 → 使用 splitChunks 分离    │
└─────────────────────────────────────────┘

作用：提取 CSS 到单独文件

优点：
├── CSS 独立加载，可缓存
├── JS 文件体积减小
└── 并行加载提升性能

作用：复制静态资源到输出目录

使用场景：
├── public 目录下的静态文件
├── 不需要处理的资源文件
└── 第三方库文件

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public', to: 'public' }
      ]
    })
  ]
}

作用：构建前清理 dist 目录

优点：
├── 避免旧文件残留
├── 保持输出目录干净
└── 防止缓存问题

npx webpack init

# 步骤 1：进入空项目目录
cd my-project

# 步骤 2：执行初始化命令
npx webpack init

Which of the following JS solutions do you want to use?
├── ES6        → 原生 JavaScript
└── TypeScript → TypeScript 支持

Do you want to use webpack-dev-server?
├── Yes → 前端页面项目推荐
└── No  → 服务端项目

Do you want to simplify creation of HTML files for you?
├── Yes → 自动配置 HtmlWebpackPlugin
└── No  → 手动创建 HTML

Do you want to add PWA support?
├── Yes → 添加 PWA 相关配置
└── No  → 通常选择 No

Which CSS solution do you want to use?
├── Sass/SCSS
├── Less
├── Stylus
└── None

Will you be using PostCSS in your project?
├── Yes → 添加 PostCSS 配置
└── No  → 跳过

├── 自动添加浏览器前缀（autoprefixer）
├── 单位转换（px → rem / vw）
├── CSS 压缩优化
└── 其他 CSS 后处理

Do you want to extract CSS for every file?
├── Yes              → 所有环境都提取
├── Only for production → 仅生产环境提取
└── No               → 不提取

Do you like to install prettier to format generated configuration?
├── Yes → 安装 Prettier
└── No  → 跳过

Which package manager do you want to use?
├── npm
├── yarn
└── pnpm

Do you want to overwrite package.json?
├── Yes → 覆盖
└── No  → 保留原文件

my-project/
├── webpack.config.js      → Webpack 配置
├── tsconfig.json          → TypeScript 配置（如选择 TS）
├── package.json           → 项目配置
├── src/
│   └── index.ts           → 入口文件
└── node_modules/          → 依赖包

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin()
  ]
};

新项目快速初始化：
├── 喜欢可视化界面 → createapp.dev
└── 喜欢命令行操作 → webpack init

已有项目配置参考：
└── createapp.dev 

新手学习配置：
└── createapp.dev（更直观）

生成配置后，需要根据项目调整：
├── 入口文件路径
├── 输出目录配置
├── 环境变量配置
├── 开发服务器端口
└── Source Map 配置

可选优化方向：
├── 开启持久化缓存（Webpack 5）
├── 配置代码分割策略
├── 开启 Tree Shaking
├── 使用 CDN 加载大型库
└── 配置懒加载和预加载

生产环境优化：
├── 代码压缩（TerserPlugin）
├── CSS 压缩（CssMinimizerPlugin）
├── 图片压缩
├── Gzip 压缩
└── 文件名哈希

步骤 1：选择合适的生成工具
    ↓
步骤 2：根据项目需求选择功能
    ↓
步骤 3：生成配置文件
    ↓
步骤 4：根据项目调整配置
    ↓
步骤 5：测试构建流程
    ↓
步骤 6：持续优化配置

建议做法：
├── 保存常用配置模板
├── 建立团队配置规范
├── 使用配置继承（webpack-merge）
└── 版本控制配置文件