目录

Webpack+Vue+TS 环境配置

scripts/webpack.config.js

src/Hello.tsx

src/SfcDemo.vue

src/main.tsx

src/shims-vue.d.ts

package.json

---

Webpack+Vue+TS 环境配置

scripts/webpack.config.js

const path = require('path')
// 安装插件 npm install webpack webpack-cli @babel/core @babel/preset-env @babel/preset-typescript
// 安装vue3 npm install vue@next 
// 安装vue3对应的vue-loader // npm install vue-loader@next 
// 安装 npm install babel-loader -D
// npm install @vue/compiler-sfc -D // 用于编译文件组件用的
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {entry: path.resolve(__dirname, "../src/main.tsx"),  // 入口文件mode: "development", // 开发模式module: {rules: [// 转义规则{test: /\.tsx?$/,loader: 'babel-loader',options: {presets: ["@babel/preset-env", // 转义es"@babel/preset-typescript"// 转义ts],plugins: ["@vue/babel-plugin-jsx" // 用于转义vue jsx],},// 排除exclude: /node_modules/},{// .vue的文件test: /\.vue$/,loader: 'vue-loader'}]},resolve: { // import支持的扩展名extensions: [".tsx", ".ts", ".js", '.vue']},output: {// 打包后信息配置filename: 'bundle.js',path: path.resolve(__dirname, "../build")},devServer: {static: {// 打包静态文件配置directory: path.resolve(__dirname, "../build"),},port: 3020// 端口},plugins: [new HtmlWebpackPlugin({// 生成html文件模板template: path.resolve(__dirname, '../template.html')}),new VueLoaderPlugin()]
}

src/Hello.tsx

export default () => {return <div>Hello JSX</div>
}

src/SfcDemo.vue

<template>
<div>Hello SFC</div>
</template>
<script>
export default {setup(){return {}}
}
</script>
<style>
</style>

src/main.tsx

import { createApp } from 'vue'
// 让ts认.vue;需要一个垫片文件shims-vue.d.ts
import SfcDemo from './SfcDemo.vue'
import Hello from './Hello'
const App = () => {return <div><SfcDemo /><Hello /></div>
}
createApp(App).mount("#root")

src/shims-vue.d.ts

declare module '*.vue' { // 告诉ts 按【vue-component】 按下面的类型执行import { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}

package.json

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config scripts/webpack.config.js","serve": "webpack serve --config scripts/webpack.config.js"},