使用 Webpack 5 手动搭建 Vue 3 项目（不使用 Vue CLI）

以下是完整的手动配置步骤，从零开始搭建 Vue 3 + Webpack 5 项目：

1. 初始化项目

mkdir vue3-webpack-manual
cd vue3-webpack-manual
npm init -y

2. 安装核心依赖

# 安装 Vue 3
npm install vue@3

# 安装 Webpack 5 和开发服务器
npm install --save-dev webpack@5 webpack-cli@4 webpack-dev-server@4

# 安装 Vue 相关加载器
npm install --save-dev vue-loader@16 @vue/compiler-sfc

# 安装必要的 Webpack 插件和加载器
npm install --save-dev \
    css-loader@6 \
    style-loader@3 \
    file-loader@6 \
    html-webpack-plugin@5 \
    clean-webpack-plugin@4 \
    babel-loader@8 \
    @babel/core@7 \
    @babel/preset-env@7

3. 创建项目结构

vue3-webpack-manual/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── babel.config.js
├── webpack.config.js
└── package.json

4. 配置 Webpack (webpack.config.js)

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg|ico)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]',
        },
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    historyApiFallback: true,
    hot: true,
    compress: true,
    port: 8080,
    open: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.vue', '.json'],
  },
}

5. 配置 Babel (babel.config.js)

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['last 2 versions', 'not dead'],
        },
      },
    ],
  ],
}

6. 创建基础文件

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 + Webpack 5</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

src/App.vue

<template>
  <div class="app">
    <h1>Vue 3 + Webpack 5</h1>
    <HelloWorld msg="手动配置项目" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
}
</script>

<style>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/HelloWorld.vue

<template>
  <div class="hello">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
}
</script>

<style scoped>
.hello {
  color: #42b983;
  font-size: 1.2em;
}
</style>

7. 更新 package.json 脚本

"scripts": {
  "dev": "webpack serve --mode development",
  "build": "webpack --mode production",
  "preview": "webpack serve --mode production"
}

8. 运行项目

npm run dev

项目将在 http://localhost:8080 自动打开

9. 生产构建

npm run build

构建结果将生成在 dist/ 目录中

可选扩展配置

添加环境变量

安装 dotenv-webpack:

npm install --save-dev dotenv-webpack

更新 webpack.config.js:

const Dotenv = require('dotenv-webpack')

// 在 plugins 数组中添加
plugins: [new Dotenv()]

添加 SCSS 支持

npm install --save-dev sass-loader@12 sass@1

在 webpack.config.js 的 module.rules 中添加:

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

添加 TypeScript 支持

npm install --save-dev typescript ts-loader @vue/runtime-dom

创建 tsconfig.json 并更新 webpack 配置。

这样你就完成了一个不使用 Vue CLI，完全手动配置的基于 Webpack 5 的 Vue 3 项目！