如何配置pm2与webpack实现TypeScript编译重载？求模板代码及多任务配置

嘿，我来帮你梳理清楚如何搭配PM2和Webpack实现TypeScript项目的自动编译与重载，还会给你一套可用的模板配置~

简单来说，我们需要让Webpack负责TypeScript的编译工作，并通过它的watch模式监听源码变化自动重新编译；同时让PM2负责管理应用进程，要么监听编译后的产物目录自动重载，要么在Webpack编译完成后主动触发PM2重载进程。

1. 安装依赖 #

首先把需要的包装全：

npm install --save-dev typescript webpack webpack-cli ts-loader pm2 cross-env
# 如果要用编译后触发重载的插件，再加这个
npm install --save-dev webpack-shell-plugin-next

2. TypeScript基础配置（tsconfig.json） #

在项目根目录创建这个文件，指定编译规则：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. Webpack编译配置（webpack.config.js） #

配置入口、TS加载器，开启watch模式监听源码变化：

const path = require('path');
// 如果用编译后触发重载的插件，引入它
const WebpackShellPluginNext = require('webpack-shell-plugin-next');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 开启watch模式，自动监听TS文件变化并重新编译
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    poll: 1000 // 可选：每秒检查一次文件变化，解决某些系统监听失效的问题
  },
  // 可选：编译完成后触发PM2重载（替代PM2监听dist目录的方式）
  plugins: [
    new WebpackShellPluginNext({
      onBuildEnd: {
        scripts: ['pm2 reload app-server'],
        blocking: false,
        parallel: true
      }
    })
  ]
};

4. PM2进程管理配置（ecosystem.config.js） #

这是核心配置文件，定义两个任务：一个跑Webpack编译，一个跑应用进程。这里提供两种方案：

方案1：PM2监听dist目录自动重载 #

module.exports = {
  apps: [
    {
      name: 'webpack-compiler',
      script: 'npx',
      args: 'webpack --watch',
      autorestart: false, // Webpack watch本身会持续运行，不需要PM2重启
      watch: false,
      env: {
        NODE_ENV: 'development'
      }
    },
    {
      name: 'app-server',
      script: './dist/bundle.js',
      instances: 1,
      autorestart: true,
      watch: ['./dist'], // 监听dist目录，文件变化时自动重载应用
      watch_options: {
        followSymlinks: false
      },
      env: {
        NODE_ENV: 'development'
      }
    }
  ]
};

方案2：Webpack编译完成后主动触发PM2重载 #

如果觉得PM2监听dist目录太频繁，可以用这种方式，记得把上面Webpack配置里的插件打开，同时修改PM2配置：

module.exports = {
  apps: [
    {
      name: 'webpack-compiler',
      script: 'npx',
      args: 'webpack --watch',
      autorestart: false,
      watch: false,
      env: {
        NODE_ENV: 'development'
      }
    },
    {
      name: 'app-server',
      script: './dist/bundle.js',
      instances: 1,
      autorestart: true,
      watch: false, // 关闭PM2的自动监听，由Webpack触发重载
      env: {
        NODE_ENV: 'development'
      }
    }
  ]
};

5. 启动项目 #

现在只需要一条命令就能启动所有任务：

pm2 start ecosystem.config.js

你可以用pm2 logs查看两个进程的日志，pm2 list查看进程状态，pm2 stop all停止所有进程。

最后给你一个完整的项目目录结构参考：

your-project/
├── src/
│   └── index.ts       # 你的TS源码入口
├── dist/              # Webpack编译产物目录（自动生成）
├── tsconfig.json
├── webpack.config.js
├── ecosystem.config.js
└── package.json

• 确保tsconfig.json的outDir和Webpack的output.path完全一致，不然PM2找不到编译后的文件；
• 如果Webpack watch不生效，检查watchOptions.ignored是否排除了不该排除的目录，或者系统文件权限是否正常；
• PM2重载时报错，先看Webpack编译是否有错误（pm2 logs webpack-compiler），再检查bundle.js是否存在。

内容的提问来源于stack exchange，提问作者Mithun Shreevatsa