Webpack TypeScript Of TsLoader

2024年08月01日

柏拉文

越努力，越幸运

一、认识

---

基于 ts-loader 构建 TypeScipt 运行环境

二、准备

---

首先，你需要安装 Webpack 及相关依赖，包括 ts-loader 和 TypeScript：

pnpm add webpack webpack-cli typescript ts-loader -D

三、构建

---

3.1 index.ts

const a: number = 3;
const b: string = "";

console.log("a", a);
console.log("b", b);

3.2 package.json

{
  "name": "ts-loader",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack -c webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.5.4",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4"
  }
}

3.3 tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "moduleResolution": "node"
  }
}

3.4 webpack.config.js

const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "index.ts"),
  output: {
    clean: true,
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ["ts-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
};