Webpack 搭建 Vue3 脚手架详细步骤

创建一个新的 Vue 项目

1）初始化项目目录

新建一个文件夹，或者使用以下指令

mkdir webpack-vue_demo
cd webpack-vue_demo

2）初始化 npm 项目

npm init -y

3）安装 vue 和 webpack 相关依赖

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server --save

如果需要支持 ES6+ 语法，还需要安装相应的 Babel 依赖：

npm install @babel/core @babel/preset-env babel-loader --save-dev

安装完成后，package.json 文件中会包含这些依赖：

设置项目结构

PS：以下文件均使用 Vue3 语法

1）创建项目文件

在 node_modules 同级创建 src 和 public 文件夹，src 里面创建 main.js、App.vue、index.html，public 里面创建 index.html

2）编写简单的 vue 组件（src/App.vue）

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/green.png">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup() {
    const message = ref('Hello Vue!')
    return {
      message
    }
  }
}
</script>

<style>
#app {
  max-width: 300px;
  margin: auto;
}
</style>

3）编写入口文件（src/main.js）

import { createApp } from 'vue'
import App from './App.vue'
import './assets/green.png'

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

4）创建 html 模板（src/index.html、public/index.html）

在src/index.html中，<script src="/bundle.js"></script>：告诉浏览器从服务器加载并执行bundle.js文件，这个文件是 Webpack 打包应用后生成的，包含了整个应用代码。在开发过程中，Webpack Dev Server 会提供这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>
</html>

配置 Webpack

1）创建 Webpack 配置文件

与 package.json 同级创建 webpack.config.js，有些依赖还未安装的需要安装，比如 vue-style-loader、css-loader

npm install vue-style-loader css-loader --save-dev

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

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html', // 指定模板文件
      filename: 'index.html',          // 输出文件名
      inject: 'body'                   // 注入JS到body底部
    })
  ],
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'src'), // 从src提供静态文件
    },
  }
}

PS：一定要配置html-webpack-plugin，它会生成index.html，确保在构建输出的dist目录中包含index.html

2）添加构建和开发脚本

在 package.json 文件的 scripts 中添加：

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

运行和构建项目

1）运行项目

npm run dev

运行成功如下图所示，通过访问地址即可看见页面

2）构建项目

npm run build

构建成功后会生成 dist：