自己构建webpack+vue3+ts

先看看我的目录结构（我全局使用TS）：

一、安装配置webpack打包

安装esno

npm install esno

esno 是基于 esbuild 的 TS/ESNext node 运行时,有了它，就可以直接通过esno *.ts的方式启动脚本，package.json中添加 type:“module”，使用esm的模块管理方式。

{
   
   
  "name": "create-my-vue-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
   
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "esno ./config/build.ts"
  },
  "type": "module",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
   
   
    "esno": "^4.0.0"
  }
}

创建build.ts，执行npm run build

安装webpack、webpack-cli

npm install webpack
npm install webpack-cli

webpack必须安装webpackcli
build.ts中编写打包代码

import webpack, {
   
    Stats } from "webpack";
import config from "./webpack.config"

//我直接使用webpack，不使用webpck-cli，vue的脚手架
const compiler = webpack(config, (err, stats) => {
   
   
    if (err) {
   
   
        console.error(err.stack || err)
    } else if ((stats as Stats).hasErrors()) {
   
   
        console.log(stats);
    } else {
   
   

    }
})

编写打包配置文件webpack.config.ts

import path from "path";//nodejs里面的基本包，用来处理路径
const parentDir = path.resolve(process.cwd());

//我们先打个基本的包
export default {
   
   
    mode: "development" as "development",
    entry: "./src/main.ts",
    output: {
   
   
        path: path.join(parentDir, 'dist'),
        filename: "bundle.js",
    },
    module: {
   
   
        // 指定要加载的规则
        rules: [],
    },
    // 模块配置：让webpack了解哪些方法可以被当作模块引入
    resolve: {
   
   
		extensions: ['.ts', '.js']
    },
    plugins: []
};

创建业务代码入口文件main.ts

let test: string = '';
console.log(test);

执行一下打包npm run build

报错了，说需要个loader来处理ts，我们安装ts-loader，并在webpack.config.ts中添加相关配置

npm install ts-loader

import path from "path"