Vue3使用Webpack？

Vue 3 完全支持使用 Webpack 作为构建工具。以下是详细的解释和实践指南：

一、Vue 3 与 Webpack 的关系

1. 官方支持

   • Vue CLI（官方脚手架工具）在 Vue 3 中默认仍基于 Webpack，虽然 Vue 官方推荐新项目使用 Vite，但 Webpack 依然是企业级项目的常见选择。
   • Vue 3 的组件编译、热更新、代码分割等功能均可通过 Webpack 实现。

2. 适用场景

   • 需要兼容旧项目或特定 Webpack 插件（如微前端、复杂代码分割）。
   • 需要深度定制构建流程（如自定义 Loader、复杂环境变量管理）。

二、如何在 Vue 3 中使用 Webpack

1. 通过 Vue CLI 创建项目

Vue CLI 默认集成 Webpack，无需手动配置：

npm install -g @vue/cli
vue create my-vue3-project
# 选择 Vue 3 预设
cd my-vue3-project
npm run serve

2. 手动配置 Webpack（高级）

若需完全自定义 Webpack，需以下核心依赖：

• webpack 和 webpack-cli
• vue-loader（需 ^16.0.0 以上版本，支持 Vue 3）
• @vue/compiler-sfc（编译单文件组件）

示例 webpack.config.js：

const {
   
    VueLoaderPlugin } = require('vue-loader');
const path = require('path');

module.exports = {
   
   
  entry: './src/main.js'