通过Webpack5 手动搭建一个 Vue3.x + typescript 开发环境
目录
- 前言
- 项目初始化
- 集成babel
- 集成样式处理
- js集成到页面
- 配置开发服务器
- 配置清除打包文件
- 集成TypeScript
- 集成Vue3
前言
官方已经存在Vue3.x 脚手架，完全没有必要使用手动搭建，当然这里手动搭建只是加深对技术的理解，再使用其基础上，了解部分背后原理，这样才可以在具体的业务逻辑中活灵活现的运用其知识点。
项目初始化
第一步 : 初始化package.json
npm init -y
第二步 : 安装 webpack
npm install webpack webpack-cli -D
注意：
- 1、 -D 相当于 --save-dev 开发环境所需要的依赖
- 2、 -S 相当于 --save 生产环境所需要的依赖
第三步： 初始化目录与文件
- 创建script/webpack.config.js 文件用于编写webpack的配置
module.exports = {
mode: "development",// 环境模式
entry: path.resolve(__dirname,'../src/main.js'),// 打包入口
output: {
path: path.resolve(__dirname,'../dist'), // 打包出口
filename: "js/[name].js"// 打包完的静态资源文件名
}
}
- 创建 src 目录用于存放编写的代码
// src/main.js
console.log(`hello the world`)
const testVue3 = `test Vue3`
console.log(testVue3)
- 修改package.json 中 scripts
webpack --config ./script/webpack.config.js
- 打包
在项目的根目录输入：npm run build
打包成功后 根目录会多一个dist文件夹，里面的main.js 就是打包后的文件
集成babel
因为部分浏览器不支持es6及以上高级语法，所以需要将其转换为es5
第一步 : 安装依赖
npm install @babel/core babel-loader @babel/preset-env -D
第二步 : 修改webpack.config.js 配置
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,// 不编译
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
}
]
}
}
第三步 在根目录创建babel.config.js
module.exports = {
presets: [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 chrome version"]
}
}]
]
}
集成样式处理
因为 webpack 默认只能打包处理 commonJs 规范的 js 文件，处理其它文件都需要相对应的处理器进行处理。
第一步 安装依赖
npm i style-loader css-loader less less-loader -D
第二步 配置webpack.config.js
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
js集成到页面
因为 webpack 默认只能打包处理 commonJs 规范的 js 文件，处理其它文件都需要相对应的处理器进行处理。
第一步 安装依赖
npm i html-webpack-plugin -D
第二步 配置webpack,config.js
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'../index.html'),// 要使用的html模板
filename: "index.html",//打包后输出的文件名
title:'手动搭建Vue3开发环境'
}),
第三步 在根目录创建index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%=htmlWebpackPlugin.options.title %>title>
head>
<body>
<div id="root">div>
body>
html>
配置开发服务器
为了解决每次都要手动打包打开index.html 看效果问题，这里添加一个开发服务器，让其在浏览器自动打开。
第一步 安装依赖
npm i webpack-dev-server -D
第二步 配置webpack.config.js 配置
module.exports = {
//...
devServer: {
port:8080,
static: path.resolve(__dirname,'../dist'),
open:true
}
//...
}
配置清除打包文件
为了解决打包文件又hash,每次dist生成新文件，老的还会保留问题。
第一步 安装依赖
npm i clean-webpack-plugin -D
第二步 配置webpack.cofnig.js
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
plugins: [
// 每次打包都会清理掉旧的dist文件
new CleanWebpackPlugin()
]
}
集成TypeScript
TypeScript 让vue3更加规整
第一步： 安装依赖
npm i @babel/preset-typescript -D
第二步: 老规矩 配置webpack.config.js 文件
module.epxorts = {
module: {
rules: [
{
test: /\.(t|j)s$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
cacheDirectory: true,
},
},
},
],
},
};
第三步： 在babel.config.js 文件中添加
module.exports = {
presets: ["@babel/preset-env",["@babel/preset-typescript"{
//支持所有文件扩展名
allExtensions: true
},
],
],
};
第四步 将main.js 改为 main.ts
集成Vue3
安装Vue3
第一步： 安装依赖
npm i vue@next -S
第二步： 安装vue-loader
npm i vue-loader -D
第三步: 在src文件夹下新建App.vue
<template>
<div>“hello the world”</div>
<div @click="testFunction">{{testConst}}</div>
</template>
<script>
import {reactive,toRefs} from "vue"
export default{
setup(){
const data = reactive({
testConst: 1
});
const testFunction = () => {
console.log(`哈哈哈`)
}
return {
...toRefs(data),
testFunction
}
}
}
</script>
<style scoped>
div{
color: yellowgreen;
}
</style>
第四步: 修改main.ts
// Vue3.x 引入vue的形式
import {createApp} from "vue";
// 引入App页面组件
import App from "./App.vue";
// 通过createApp 初始化app
const app = createApp(App);
// 将页面挂载到root节点
app.mount("#root");
第五步: 配置webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: "vue-loader",
},
],
},
};