Webpack 搭建 Vue3 脚手架详细步骤

创建一个新的 Vue 项目

1)初始化项目目录

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

bash 复制代码
mkdir webpack-vue_demo
cd webpack-vue_demo

2)初始化 npm 项目

csharp 复制代码
npm init -y

3)安装 vue 和 webpack 相关依赖

arduino 复制代码
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server --save

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

sql 复制代码
npm install @babel/core @babel/preset-env babel-loader --save-dev

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

设置项目结构

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

1)创建项目文件

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

2)编写简单的 vue 组件(src/App.vue)

xml 复制代码
<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)

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import './assets/green.png'

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

4)创建 html 模板(src/index.html)

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

xml 复制代码
<!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

css 复制代码
npm install vue-style-loader css-loader --save-dev
javascript 复制代码
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  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()
  ],
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'src'), // 从src提供静态文件
    },
  }
}

2)添加构建和开发脚本

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

json 复制代码
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack serve --mode development"
  },

运行和构建项目

1)运行项目

arduino 复制代码
npm run dev

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

2)构建项目

arduino 复制代码
npm run build

构建成功后会生成 dist:

相关推荐
她说人狗殊途10 分钟前
Ajax笔记
前端·笔记·ajax
yqcoder19 分钟前
33. css 如何实现一条 0.5 像素的线
前端·css
excel35 分钟前
Nuxt 3 + PWA 通知完整实现指南(Web Push)
前端·后端
yuanmenglxb200441 分钟前
构建工具和脚手架:从源码到dist
前端·webpack
rit84324991 小时前
Web学习:SQL注入之联合查询注入
前端·sql·学习
啃火龙果的兔子1 小时前
Parcel 使用详解:零配置的前端打包工具
前端
Lsx_1 小时前
MultiRepo 和 Monorepo:代码管理的演进与选择
前端·javascript·架构
潘多编程1 小时前
构建企业级Web应用:AWS全栈架构深度解析
前端·架构·aws
裕波1 小时前
Vue 与 Vite 生态最新进展:迈向一体化与智能化的未来
前端·vue.js
destinying2 小时前
当部分请求失败时,前端如何保证用户体验不崩溃?
前端·javascript·程序员