三分钟快速搭建Vue3+webpack项目
项目目录
如下图：
其中：
package.json：对项目进行描述，包括项目的基本信息、依赖模块的版本信息等等；
注意：可以手动创建或者通过npm init自动创建。
代码：
{
"name": "yydpt_vue_base",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev-build-server": "webpack --config ./webpack.dev.config.js --progress",
"dev-server": "webpack-dev-server --open chrome --config ./webpack.dev.config.js --progress"
},
"author": "",
"license": "ISC",
"devDependencies": {
"vue": "^3.2.33",
"vue-loader": "^16.0.0-beta.4",
"@vue/compiler-sfc": "^3.2.33",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"babel-loader": "^8.0.5",
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"style-loader": "^1.2.1",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0"
},
"dependencies": {
"vue": "^3.2.33",
"vue-loader": "^16.0.0-beta.4",
"@vue/compiler-sfc": "^3.2.33",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"babel-loader": "^8.0.5",
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"style-loader": "^1.2.1",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0"
}
}
代码写好之后执行下npm install，这样才能下载项目的依赖模块；
node_modules：存放依赖模块的文件夹；
注意：执行npm install 之后会自动生产node_modules这个文件，并将下载的依赖模块放入此文件中。
package-lock.json：锁定依赖模块的版本；
注意：执行npm install 之后自动生成的文件。
webpack.dev.config.js：webpack的配置文件，用来编译项目、打包项目、启动服务等等；
注意：自己手动创建，此项目的该配置文件主要是开发环境使用。
代码：
const path = require('path');
const { VueLoaderPlugin }=require("vue-loader")
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 把打包后的文件直接注入到html模板中
module.exports = {
mode:'development', // 设置开发模式
output:{
path:path.resolve(__dirname,'./build/development'), // 动态获取出口路径(绝对路径)-文件编译后的位置
filename:'bundle.js' // 出口文件名
},
devServer:{
port:8888, // 设置端口号，如果没有设置，会默认端口号
},
module: {
rules: [
{
test: /\.(js)$/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'],
}
},
exclude: /node_modules/
},{
test:/\.(css)$/,
use:[{
loader:"style-loader" // 将所有的计算后的样式加入页面中,html页面中插入css代码
},{
loader:"css-loader", // 解析CSS样式,可以用模块的方式手动对象形式写样式,style-loader自动处理了这个注入
},//能够使用类似@import 和 url(...)的方法实现 require()的功能
]
},{
test:/\.(vue)$/,
use:{
loader:"vue-loader"
}
}
],
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({ // 把打包后的文件直接注入到html模板中
title:'月影WEB',
template:path.join(__dirname, "./src/index.html"), // 指定模板页面
filename: 'index.html', // 模板的名称
inject: 'body', // 将编译的vue的js文件注入到模板页面的body内
})
],
}
webpack.prod.config.js：和webpack.dev.config.js文件一样的，只不过这个文件是在生产环境使用；
src：这个文件夹下面一般放的是项目代码；
注意：自己手动创建。
在src文件夹下分别创建
index.html
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js
代码：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue
代码：
<template>
<div>
{{ welcome }}
</div>
</template>
<script>
import { setup } from 'vue'
export default {
name:"firstVueProJectInVue3",
setup() {
var welcome = "月影WEB 欢迎大家来学习各种技术知识！"
return { welcome }
},
}
</script>
build：发布版本的时候，项目编译打包的文件所放的目录；
注意：文件是在编译打包的过程之中自动生成，该文件的名称是webpack.dev.config.js这个配置文件之中的配置设置的。
以上就是一个基础的Vue3+webpack项目的相关代码了；
如果需要对项目进行编译打包只需要执行：npm run dev-build-server
就会将这个项目编译打包到build 这个文件夹下了。
如果需要启动这个项目的服务只需要执行：npm run dev-server
就能启动该项目的服务了。
这一篇文章是快速的搭建一个简单的vue3+webpack项目，因此没有非常详细的写每一步的代码，如果需要从头跟着每一步进行开发的话，可以去看
//www.greatytc.com/nb/52671509
这个专栏的文章，里面从头到尾的详细的写了每一步的过程。
关注公众号（月影WEB），了解更多的前后端知识；
欢迎大家关注互相交流学习；
