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:

相关推荐
ObjectX前端实验室30 分钟前
【react18原理探究实践】scheduler原理之Task 完整生命周期解析
前端·react.js
ObjectX前端实验室40 分钟前
【react18原理探究实践】调度器(Scheduler)原理深度解析
前端·react.js
路漫漫心远1 小时前
音视频学习笔记十八——图像处理之OpenCV检测
前端
摸着石头过河的石头1 小时前
从零开始玩转前端:一站式掌握Web开发基础知识
前端·javascript
sniper_fandc1 小时前
关于Mybatis-Plus的insertOrUpdate()方法使用时的问题与解决—数值精度转化问题
java·前端·数据库·mybatisplus·主键id
10岁的博客2 小时前
技术博客SEO优化全攻略
前端
南屿im2 小时前
别再被引用坑了!JavaScript 深浅拷贝全攻略
前端·javascript
想要一辆洒水车2 小时前
vuex4源码分析学习
前端
Hashan2 小时前
告别混乱开发!多页面前端工程化完整方案(Webpack 配置 + 热更新)
webpack
sophie旭2 小时前
一道面试题,开始性能优化之旅(6)-- 异步任务和性能
前端·javascript·性能优化