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 文件夹，src 里面创建 main.js、App.vue、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）

<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')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 中添加：

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

在这里插入图片描述

运行和构建项目

1）运行项目

npm run dev

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

在这里插入图片描述

2）构建项目

npm run build

构建成功后会生成 dist：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/91867.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/91867.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！