Webpack搭建 Vue3脚手架详细教程

2）webpack webpack-cli webpack-dev-server 是webpack的相关依赖。1）在项目的根目录创建 src文件，在src 里面创建 main.js、App.vue文件。2）在项目的根目录创建public 文件夹，在src 里面创建index.html文件。1）vue vue-loader vue-template-compiler 是vue相关的依赖。- 编写Ap

m0_60893808

228人浏览 · 2025-08-26 15:12:19

m0_60893808 · 2025-08-26 15:12:19 发布

一、创建Vue3项目

1.创建文件vue_demo

mkdir vue_demo //创建项目文件
cd vue_demo  //进入项目文件

2.在文件里面初始化npm项目

npm init -y

3.安装vue和 webpack基础依赖

1）vue vue-loader vue-template-compiler 是vue相关的依赖

2）webpack webpack-cli webpack-dev-server 是webpack的相关依赖

`3）-S (--save)`

用于将包添加到项目的 dependencies，表示这是在生产环境中运行时所需的依赖。
例如：npm install package-name -S，这将把 package-name 添加到 dependencies 中。

`-D (--save-dev`)

用于将包添加到项目的 devDependencies，表示这是在开发阶段所需的依赖，例如测试工具、构建工具等。
例如：npm install package-name -D，这将把 package-name 添加到 devDependencies 中。

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

4.Babel 依赖

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

注意：以上就最基础的项目

二、创建vue项目规范结构

1.创建项目文件

1）在项目的根目录创建 src文件，在src 里面创建 main.js、App.vue文件

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

import { createApp } from 'vue' //vue3是使用createApp这个方法创建
import App from './App.vue'

createApp(App).mount('#app')//挂载

- 编写App.vue文件（src/App.vue）

<template>
  <div id="app">
    <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>

2）在项目的根目录创建public 文件夹，在src 里面创建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-clic</title>
</head>
<body>
  <div id="app"></div>
</body>
    
</body>
</html>

三、配置Webpack

1.在项目根目录创建config文件下面在创建webpak.config.js。在安装vue需要的依赖

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

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

module.exports = {
  entry:path.resolve(__dirname, '../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: path.resolve(__dirname, '../public/index.html'), // 指定模板文件
      filename: 'index.html',          // 输出文件名
      inject: 'body'                   // 注入JS到body底部
    }),
    new DefinePlugin({
        __VUE_PROD_DEVTOOLS__: false,
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
    })//关闭__VUE_PROD_DEVTOOLS__，__VUE_OPTIONS_API__，__VUE_PROD_HYDRATION_MISMATCH_DETAILS__的警告
  ],
  devServer: {
    port: 8080,
    hot: true,
    open: true
  }
}

备注：以上就是简单vue脚手架项目搭建