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

5
module.exports = {
6
  entry: './src/index.js',
7
  output: {
8
    path: path.resolve(__dirname, 'dist'),
9
    filename: '[name].[contenthash].js',
10
    clean: true
11
  },
12
  module: {
13
    rules: [
14
      {
15
        test: /\.js$/,
16
        exclude: /node_modules/,
17
        use: {
18
          loader: 'babel-loader',
19
          options: {
20
            presets: ['@babel/preset-env']
21
          }
22
        }
23
      },
24
      {
25
        test: /\.css$/,
26
        use: [MiniCssExtractPlugin.loader, 'css-loader']
27
      },
28
      {
29
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
30
        type: 'asset/resource'
31
      }
32
    ]
33
  },
34
  plugins: [
35
    new HtmlWebpackPlugin({
36
      template: './src/index.html'
37
    }),
38
    new MiniCssExtractPlugin({
39
      filename: '[name].[contenthash].css'
40
    })
41
  ]
42
};

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3

4
export default defineConfig({
5
  plugins: [vue()],
6
  build: {
7
    outDir: 'dist',
8
    assetsDir: 'assets',
9
    sourcemap: true
10
  }
11
})

1
开始选择构建工具
2
│
3
├── 是否为新项目？
4
│   ├── 是 → 推荐 Vite
5
│   │   ├── 使用现代框架？(Vue3/React18+) → Vite ✅
6
│   │   └── 需要广泛兼容性？→ 考虑 Webpack
7
│   │
8
│   └── 否 → 评估现有项目
9
│       ├── 项目规模大且复杂？→ 继续使用 Webpack
10
│       ├── 开发体验是痛点？→ 考虑迁移到 Vite
11
│       └── 团队熟悉 Webpack？→ 权衡迁移成本
12
│
13
├── 对性能要求？
14
│   ├── 开发速度优先 → Vite ✅
15
│   ├── 构建优化优先 → Webpack ✅
16
│   └── 两者兼顾 → 根据项目规模选择
17
│
18
└── 团队因素？
19
    ├── 团队技术水平高 → Vite（学习成本低）
20
    ├── 已有 Webpack 经验 → Webpack（继续发挥优势）
21
    └── 追求新技术 → Vite（现代化工具链）

1
// Loader 示例
2
module.exports = {
3
  module: {
4
    rules: [
5
      // CSS Loader：将 CSS 转换为 JS 模块
6
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
7
      // Babel Loader：将 ES6+ 转换为 ES5
8
      { test: /\.js$/, use: 'babel-loader' },
9
      // TypeScript Loader：将 TS 转换为 JS
10
      { test: /\.ts$/, use: 'ts-loader' }
11
    ]
12
  }
13
};

1
// Plugin 示例
2
const HtmlWebpackPlugin = require('html-webpack-plugin');
3
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4

5
module.exports = {
6
  plugins: [
7
    // HTML 插件：生成 HTML 文件
8
    new HtmlWebpackPlugin({
9
      template: './src/index.html'
10
    }),
11
    // CSS 提取插件：将 CSS 提取到单独文件
12
    new MiniCssExtractPlugin({
13
      filename: '[name].[contenthash].css'
14
    }),
15
    // 环境变量插件
16
    new webpack.DefinePlugin({
17
      'process.env.NODE_ENV': JSON.stringify('production')
18
    })
19
  ]
20
};

1
module.exports = {
2
  module: {
3
    rules: [
4
      // 脚本文件
5
      { test: /\.js$/, use: 'babel-loader' },
6
      { test: /\.ts$/, use: 'ts-loader' },
7
      { test: /\.vue$/, use: 'vue-loader' },
8

9
      // 样式文件
10
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
11
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
12
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
13

14
      // 资源文件
15
      { test: /\.(png|jpg|gif)$/, type: 'asset/resource' },
16
      { test: /\.(woff|woff2|eot|ttf|otf)$/, type: 'asset/resource' },
17
      { test: /\.svg$/, use: 'svg-loader' },
18

19
      // 数据文件
20
      { test: /\.json$/, type: 'json' },
21
      { test: /\.xml$/, use: 'xml-loader' }
22
    ]
23
  }
24
};

1
// Vite 开箱即用支持
2
import './style.css'           // CSS
3
import './style.scss'          // Sass/SCSS
4
import './style.less'          // Less
5
import './style.styl'          // Stylus
6
import Component from './App.vue'  // Vue SFC
7
import { ReactComponent } from './icon.svg'  // SVG
8
import data from './data.json'  // JSON
9
import Worker from './worker?worker'  // Web Worker
10
import wasmModule from './module.wasm?init'  // WebAssembly

1
// 使用 - 注意前缀必须是 VITE_
2
console.log(import.meta.env.VITE_API_URL);
3
console.log(import.meta.env.MODE); // development 或 production

1
// 1. 动态导入
2
const LazyComponent = () => import('./LazyComponent.vue');
3

4
// 2. SplitChunks 配置
5
module.exports = {
6
  optimization: {
7
    splitChunks: {
8
      chunks: 'all',
9
      cacheGroups: {
10
        vendor: {
11
          test: /[\\/]node_modules[\\/]/,
12
          name: 'vendors',
13
          chunks: 'all'
14
        },
15
        common: {
16
          name: 'common',
17
          minChunks: 2,
18
          chunks: 'all'
19
        }
20
      }
21
    }
22
  }
23
};

1
// 1. 动态导入（自动分割）
2
const LazyComponent = () => import('./LazyComponent.vue');
3

4
// 2. 手动分割配置
5
export default defineConfig({
6
  build: {
7
    rollupOptions: {
8
      output: {
9
        manualChunks: {
10
          vendor: ['vue', 'vue-router'],
11
          utils: ['lodash', 'axios']
12
        }
13
      }
14
    }
15
  }
16
});

1
module.exports = {
2
  // 开发环境优化
3
  optimization: {
4
    moduleIds: 'deterministic',
5
    runtimeChunk: 'single',
6
    splitChunks: {
7
      cacheGroups: {
8
        vendor: {
9
          test: /[\\/]node_modules[\\/]/,
10
          name: 'vendors',
11
          chunks: 'all'
12
        }
13
      }
14
    }
15
  },
16

17
  // 缓存配置
18
  cache: {
19
    type: 'filesystem',
20
    buildDependencies: {
21
      config: [__filename]
22
    }
23
  },
24

25
  // 解析优化
26
  resolve: {
27
    modules: ['node_modules'],
28
    extensions: ['.js', '.vue', '.json']
29
  }
30
};

1
export default defineConfig({
2
  // 预构建优化
3
  optimizeDeps: {
4
    include: ['vue', 'vue-router', 'axios'],
5
    exclude: ['your-local-package']
6
  },
7

8
  // 构建优化
9
  build: {
10
    target: 'es2015',
11
    cssCodeSplit: true,
12
    sourcemap: false,
13
    minify: 'terser',
14
    rollupOptions: {
15
      output: {
16
        chunkFileNames: 'js/[name]-[hash].js',
17
        entryFileNames: 'js/[name]-[hash].js',
18
        assetFileNames: '[ext]/[name]-[hash].[ext]'
19
      }
20
    }
21
  }
22
});

1
// 配置详细错误信息
2
module.exports = {
3
  stats: {
4
    errorDetails: true,
5
    modules: true,
6
    reasons: true
7
  }
8
};

1
// 配置调试选项
2
export default defineConfig({
3
  logLevel: 'info',
4
  clearScreen: false,
5
  optimizeDeps: {
6
    force: true // 强制重新预构建
7
  }
8
});

1
// 问题：Cannot use import statement outside a module
2
// 解决方案：
3
export default defineConfig({
4
  optimizeDeps: {
5
    include: ['lodash-es'] // 使用 ES 模块版本
6
  },
7
  define: {
8
    global: 'globalThis' // 处理全局变量
9
  }
10
});

1
// Webpack 配置
2
resolve: {
3
  alias: {
4
    '@': path.resolve(__dirname, 'src')
5
  }
6
}
7

8
// Vite 配置
9
resolve: {
10
  alias: {
11
    '@': resolve(__dirname, 'src')
12
  }
13
}

1
// 需要批量替换
2
// process.env.VUE_APP_API_URL → import.meta.env.VITE_API_URL
3
// process.env.NODE_ENV → import.meta.env.MODE

1
项目规模？
2
├── 小型 → Vite ✅
3
├── 中型 → 评估复杂度
4
│   ├── 简单 → Vite ✅
5
│   └── 复杂 → Webpack ✅
6
└── 大型 → Webpack ✅
7

8
开发体验重要性？
9
├── 极其重要 → Vite ✅
10
├── 一般重要 → 根据其他因素
11
└── 不重要 → Webpack ✅