使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（六）添加Vue的TS支持

1 引言

为了能够更好的理解webpack，特准备了这份从零开始开始搭建教程，不使用官方的脚手架，不使用预定义配置，完全从零开始搭建一个使用 Webpack5 构建的 Vue3 + TypeScript 的项目开发环境。我们已经完成了vue样式文件的loader配置，这里处理vue中TS代码的配置。

关键词

• Webpack5
• Vue3
• TypeScript
• JavaScript

文章列表

• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（一）搭建编译环境
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（二）配置HTML模板
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（三）添加Vue环境
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（四）添加Vue的样式
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（五）添加Less支持
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（六）添加Vue的TS支持
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（七）添加静态文件
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（八）不同环境的配置
• 使用 Webpack 从零开始搭建 Vue3 + TS 开发环境（九）ES语法转换

2 安装依赖

TypeScript的ts-loader在前面的文章中已经安装过了，这里就不需要安装了

3 配置

原有的ts-loader配置做如下修改

// 原来的配置
module.exports = {
  module: {
    rules:[{
      test: /\.tsx?$/,
      use: {
        loader: "ts-loader"
      },
      exclude: "/node-modules/"
    }]
  }
}

// 修改后的配置
module.exports = {
  module: {
    rules:[{
      test: /\.tsx?$/,
      use: {
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      exclude: "/node-modules/"
    }]
  }
}

4 改写代码

<!-- src/app.vue -->
<!-- 给script加上lang标签说明，给变量加上类型声明event:any -->
<template>
  <div class="app-main">
    <a class="a-button" @click="onTestClick">测试 Vue 文件：{{count}}</a>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  methods:{
    onTestClick(event:any){
      console.log(event)
      this.count++
    }
  },
  setup() {
    const count = ref(0)
    return {
      count
    }
  }
})
</script>
<style>
html,
body {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  background-color: red;
}
</style>
<style lang="less">
.app-main {
  .a-button {
    color: #fff;
    font-size: 16px;
  }
}
</style>

5 结果

附加说明:
ts-loader 在内部是调用了 TypeScript 的官方编译器 – tsc。所以，ts-loader 和 tsc 是共享 tsconfig.json。

6 总结

还有图片的loader等其他文件的loader，区别不大，想要搞清楚webpack，就是一个个的loader和plugin组合起来的。

了解一下核心概念，其他就都不难了

• 入口(entry)
• 输出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)
• 环境(environment)