Webpack：Localhost拒绝连接 - Yeoman Excel插件运行异常求助

问题原因 #

你当前使用的webpack-dev-server是开发阶段的实时重载服务器，它的运行完全依赖打开的终端窗口——窗口关闭时服务器进程直接终止，Office插件无法再访问到前端资源，因此停止工作。要实现关闭窗口后插件仍能运行，需要构建生产环境的静态文件，并使用独立的静态服务器托管。

解决方案步骤 #

1. 完善Webpack构建输出配置 #

你的Webpack配置缺少明确的输出路径定义，先修改配置文件确保构建产物能正确输出到指定目录：

// 在配置文件顶部引入path模块
const path = require('path');

// 修改output节点
output: {
  clean: true,
  path: path.resolve(__dirname, 'dist'), // 指定构建产物输出到dist目录
  filename: '[name].bundle.js' // 生成的JS文件命名规则
},

2. 执行生产环境构建 #

运行构建命令，将代码打包为静态资源文件：

npm run build

执行完成后，项目根目录会生成dist文件夹，包含插件运行所需的所有静态文件（HTML、JS、资源文件、manifest.xml）。

3. 用静态服务器托管构建产物 #

Office插件要求HTTPS环境，推荐使用serve工具快速启动HTTPS静态服务器：

• 全局安装serve：

  npm install -g serve
  

• 启动服务器（指定端口并启用SSL）：

  serve --ssl --port 3000 dist
  

  也可以在package.json的scripts中添加快捷命令，方便后续启动：

  "scripts": {
    // ... 保留原有脚本
    "start:prod": "serve --ssl --port 3000 dist"
  }
  

  之后只需运行npm run start:prod即可快速启动服务器。

4. 后台运行服务器（可选） #

如果不想一直保持终端窗口开启，可以用pm2进程管理工具让服务器在后台运行：

• 安装pm2：

  npm install -g pm2
  

• 启动后台服务器：

  pm2 serve dist 3000 --name excel-addin --ssl
  

• 需要停止服务器时执行：

  pm2 stop excel-addin
  

5. 更新插件清单（按需） #

构建后的dist/manifest.xml已经自动将开发地址替换为你配置的urlProd，如果是本地测试，可以手动将其中的地址改为https://localhost:3000/，然后重新加载插件到Excel中即可正常使用。

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