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:

相关推荐
我是华为OD~HR~栗栗呀21 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java1 天前
vivo响应式官网
前端·css·html·1024程序员节
麦麦大数据1 天前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区1 天前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗1 天前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长1 天前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅1 天前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_1 天前
Chrome开发者工具
前端·chrome
YiHanXii1 天前
this 输出题
前端·javascript·1024程序员节
楊无好1 天前
React中ref
前端·react.js