用webpack脚手架配置vue3 + ts

期待已久的vue3发布了，新版本提供了更好的性能、按需加载及更小的体积、更好的支持TypeScript以及用于处理大规模用例的新API，相对来说我比较喜欢按需加载和类似React hooks写组件的编码方式，新的版本官方推荐了新的脚手架工具是vite（相关介绍），并没有关于webpack的相关介绍及配置，有些朋友可能比较习惯使用webpack作为脚手架，今天咱们就用webpack来配置一下vue3 + ts

安装

安装webpack + vue3 + ts, vue3用了新的包名，包括git地址也进行了更新，vue3源码看这里

npm install webpack vue-next typescript --save-dev

安装vue-loader及支持vue文件的加载

npm install vue-loader

配置

配置webpack.config.js

var path = require('path'), HtmlPlugin = require('html-webpack-plugin'), VueLoaderPlugin = require('vue-loader').VueLoaderPlugin; module.exports = env => { return { entry: './src/bootstrap/main.ts', module: { rules: [ { test: /.vue$/, use: 'vue-loader' }, { test: /.ts$/, use: [{ loader: 'ts-loader', options: { appendTsSuffixTo: [/.vue$/], } }] } ] }, plugins: [new VueLoaderPlugin()] } }

ts-loader配置appendTsSuffixTo值为[/.vue$/]，新版本vue-loader需要配置plugins，其他index.html配置及出口等配置这里就不写了，大家自己去配置

添加typescript识别vue文建vue.d.ts

declare module '*.vue' { import { ComponentOptions } from 'vue' const component: ComponentOptions; export default component; }

这样typescript就能引入vue文件，不然会提示不识别错误

编码

下面开始写vue代码
app.vue

<template> <router-view></router-view> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ }) </script>

main.ts

import { createApp } from 'vue'; import App from './app.vue' import router from './router'; createApp(App).use(router).mount('#App')

到这里项目的基本配置和启动文件就写完了，直接运用基本的webpack只是启动和集成代码就行了

顺便发一下vue-router路由的代码
router.ts

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'; const routes: RouteRecordRaw[] = [ { path: '/', name: 'Home', component: import('../page/home/home.vue'), } ]; export default createRouter({ history: createWebHistory(process.env.BASE_URL), routes, });

注意

在配置vue + ts主要的几个问题
1、ts-loader一定要记得配置appendTsSuffixTo, 不然会出现ts把vue文件中的template过滤掉，导致vue报找不到render的情况
2、配置vue.d.ts文件来处理ts对vue文件的引入识别

其他

组件模板文件分离
1、利用vue2的方式引入template, 比如

import { defineComponent } from 'vue'; export default defineComponent({ template: require('app.html') // 或者 render() { return require('app.html') } })

这种方式是直接将文件由字符串的方式引入进来，集成到组件的代码中，这样需要再webpack中配置

 resolve:{ alias:{ 'vue':'vue/dist/vue.esm.js' } }

这样的配置的缺点是无法利用vue3的新特性，按需加载，之前做了个测试，用着中方式打包大概再400k左右，如果按需加载的方式只有100k左右，而且vue3采用了虚拟dom，在打包的时候模板文件就已经生成好了虚拟dom，而上述方案等于再runtime中进行解析

2、采用tsx的方式, 网上资料很多，这里就不介绍了，直接点击这里

3、vue-tsx-loader(推荐)
首先我们按照 npm install vue-tsx-loader --save-dev，接下来配置webpack

{ test: /\.tsx$/, use: [ 'vue-loader', 'vue-tsx-loader?template=html' ] }

为了支持ts的识别，这里采用.tsx后缀，不要和jsx混淆了，接下来就是组件代码
app.html

<div>Component</div>

app.tsx

import { defineComponent } from 'vue'; import './app.less' export default defineComponent({ })

文件需要在同一个目录中，如果需要对jade的支持，只许将loader配置改为vue-tsx-loader?template=jade并按照jade npm install jade，模板文件需要用.jade后缀
app.jade

div Component

这样既能使用vue3的新特性，还能做到模板文件的支持，并且支持jade

对于模板文件的分离，个人还是建议使用官方推荐的.vue的方式，因为官方有相应的解析工具，能更好的做到优化

项目Demo地址

https://github.com/EaseDo/vue3-ts-webpack.git