Office Add-in重启时Webpack未始终启动的问题咨询

一、正确终止插件进程，避免残留 #

• 终止npm run start时，务必在终端使用Ctrl+C命令，不要直接关闭终端窗口——直接关窗口会导致node/webpack进程在后台残留，占用端口或引发下次启动冲突。
• 若怀疑有残留进程，手动排查并清理：
  • Windows：执行tasklist | findstr node找到相关进程ID，再用taskkill /PID <进程ID> /F强制终止。
  • Mac/Linux：执行ps aux | grep node找到进程ID，用kill -9 <进程ID>强制终止。

二、修改npm启动脚本，自动清理残留进程 #

在项目的package.json中，给start命令添加前置的进程清理逻辑，确保每次启动前先杀掉残留的webpack/node进程：

• Windows环境示例：

  "scripts": {
    "start": "taskkill /F /IM node.exe 2>nul && webpack serve --mode development"
  }
  

• Mac/Linux环境示例：

  "scripts": {
    "start": "pkill -f 'webpack' || true && webpack serve --mode development"
  }
  

（注：根据你项目实际的webpack启动命令调整后半段内容）

三、检查并解决端口占用问题 #

webpack Dev Server默认使用的端口（如3000）可能被其他进程占用，导致无法启动：

• 查看端口占用：
  • Windows：netstat -ano | findstr :<你的端口号>
  • Mac/Linux：lsof -i :<你的端口号>
• 杀掉占用端口的进程，或者修改webpack.config.js中devServer.port的值，更换一个未被占用的端口。

四、优化webpack Dev Server配置 #

调整webpack配置，减少进程残留风险：

module.exports = {
  // ...其他配置
  devServer: {
    hot: false, // 关闭热更新可避免相关进程残留
    liveReload: true,
    open: false, // 不需要自动打开浏览器时关闭，减少额外进程
    watchOptions: {
      ignored: /node_modules/,
      poll: false // 禁用轮询，避免后台进程持续运行
    }
  }
};

五、重置依赖缓存 #

若依赖缓存损坏导致启动异常，执行npm ci命令重新安装干净的依赖（该命令会严格按照package-lock.json安装，避免缓存干扰）。

关于终止方式的问题 #

是的，必须使用Ctrl+C这类正规方式终止插件进程，才能让webpack完全退出。直接关闭终端会留下后台进程，导致下次启动时webpack无法正常启动。如果已经出现残留，手动清理进程或使用脚本自动清理就能解决即时重启的问题。

内容的提问来源于stack exchange，提问作者Brian Gonzalez