如何通过npm生态服务实现脚本修改后自动重载，无需手动重启服务

你可以通过以下两种方案实现代码修改后自动重载，无需手动重启服务：

方案1：改动后自动编译（需手动刷新浏览器，无需修改配置） #

你的项目已经预装了webpack，直接启用webpack的监听模式即可：

1. 在package.json的scripts字段中新增如下命令：

"watch-demos": "webpack --config ./webpack/demo.config.ts --watch"

2. 打开两个终端窗口分别执行以下命令：

• 终端1：运行yarn watch-demos，该进程会持续监听代码改动，自动重新编译生成simple_bundle.js
• 终端2：运行yarn serve-demos，启动静态文件服务

后续修改simple.js后，等待编译完成手动刷新浏览器即可看到改动效果。

方案2：改动后自动编译+自动刷新浏览器（操作最简，推荐） #

你的项目已经预装了webpack-dev-server，该工具原生支持热重载能力，仅需简单配置即可使用：

1. 打开项目中的webpack/demo.config.ts配置文件，在原有配置基础上新增devServer配置项：

// 原有配置保持不变，新增以下内容
module.exports = {
  // ... 你原来的所有配置项
  devServer: {
    contentBase: './demos', // 指定静态服务根目录
    open: true, // 启动服务后自动打开浏览器
    hot: true // 开启热重载能力
  }
}

2. 在package.json的scripts字段中新增如下命令：

"dev-demos": "webpack-dev-server --config ./webpack/demo.config.ts"

3. 直接运行yarn dev-demos即可，后续修改simple.js后，webpack会自动完成编译，浏览器会自动刷新加载最新代码，无需任何手动操作。

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