Webpack + TS

2025-06-24

安装

webpack：
```
npm install webpack -D
```
webpack-cli：webpack4 以上需要
```
npm install  webpack-cli -D
```
TS 编译器：帮助解析 ts 文件
```
npm install ts-loader -D
```
TS 环境：
```
npm install typescript -D
```
热更新服务：
```
npm install  webpack-dev-server -D
```
HTML 模板：
```
npm install html-webpack-plugin -D
```

配置

需要在 webpack.config.js 里配置相关信息：

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin"); // 热更新插件
module.exports = {
  entry: "./src/index.ts", // 入口文件
  mode: "development", // 开发模式
  output: {
    // 出口（输出）文件信息
    path: path.resolve(__dirname, "./dist"), // 出口文件夹
    filename: "index.js", // 出口文件名
  },
  stats: "none",
  resolve: {
    extensions: [".ts", ".js"], // 匹配后缀 @1
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  module: {
    rules: [
      // 匹配编译器，如ts、scss等
      {
        test: /\.ts$/, // 正则匹配文件
        use: "ts-loader", // 使用ts-loader对文件进行处理
      },
    ],
  },
  devServer: {
    port: 1988, // 启动的端口号
    proxy: {}, // 代理
  },
  plugins: [
    new htmlWebpackPlugin({
      // 热更新
      template: "./public/index.html", // 指定热更新模板（文件）
    }),
  ],
};

@1：在import时自动查找文件，不用再加上后缀。比如 index.js 可以直接写 index。

启动命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server", // 启动webpack-dev-server，持续热更新项目
    "build":"webpack" // 打包
},