用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


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

Component

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

你可能感兴趣的