node 项目引入 typescript 与 webpack

引入 typescript

安装依赖

npm install typescript ts-loader @types/node -D

生成配置文件

tsc --init

修改 js 文件

略

引入webpack

安装依赖

pnpm i webpack webpack-cli clean-webpack-plugin fork-ts-checker-webpack-plugin

创建 webpack.config.js 文件

// webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

module.exports = {
    // 1. 入口文件
    entry: './index.ts',

    // 2. 输出配置
    output: {
        filename: 'bundle.js', // 打包后的文件名
        path: path.resolve(__dirname, 'dist'),
        clean: true, // Webpack 5 自带清理功能，也可配合 CleanWebpackPlugin
    },

    // 3. 解析扩展名，允许省略 .ts/.js 后缀
    resolve: {
        extensions: ['.ts', '.js'],
    },

    // 4. 核心：针对 Node.js 环境优化
    target: 'node',

    // 5. 外部化依赖 (关键！)
    // 不让 webpack 打包 node_modules 中的库，保持它们作为 require() 引用
    // 这样启动速度快，且能利用 Node 的缓存机制
    externals: [nodeExternals()],

    // 6. Source Map 配置 (方便调试)
    devtool: 'source-map',

    // 7. 模块规则
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },

    // 8. 插件配置
    plugins: [
        new CleanWebpackPlugin(),
        // 在独立进程中运行类型检查，不阻塞构建，适合大型项目
        new ForkTsCheckerWebpackPlugin({
            typescript: {
                configFile: path.resolve(__dirname, 'tsconfig.json'),
            },
        }),
    ],

    // 9. 模式
    mode: 'production', // 开发时可改为 'development'
};

修改package.json

"scripts": {
    "dev": "tsx watch index.ts",
    "build": "webpack --mode production"
},