如何在lite-server运行时通过npm让webpack实时同步JavaScript变更？

当然可以搞定这个问题！本质上就是要让webpack自动监听JS文件变化并重新打包，同时让lite-server检测到打包后的文件更新，自动刷新页面。下面是具体的实现步骤：

1. 安装concurrently（并行运行多个命令） #

因为我们需要同时启动webpack的监听模式和lite-server，concurrently能帮我们在同一个终端里运行这两个进程，不用开多个窗口。安装命令：

npm install --save-dev concurrently

2. 调整npm脚本（package.json） #

修改你的package.json里的scripts字段，添加webpack监听命令和整合后的启动命令：

"scripts": {
  "build": "webpack", // 保留原来的手动打包命令
  "watch": "webpack --watch", // 新增：让webpack监听文件变化自动打包
  "start": "concurrently \"npm run watch\" \"lite-server\"" // 新增：同时启动监听服务和lite-server
}

3. 优化webpack监听配置（可选但推荐） #

虽然用webpack --watch命令已经能开启监听，但你也可以在webpack.config.js里显式配置监听选项，更灵活地控制行为：

module.exports = {
  // 你的其他webpack配置（entry、output、module规则等）
  watch: true, // 开启监听模式，和命令行--watch二选一即可
  watchOptions: {
    ignored: /node_modules/, // 忽略node_modules目录，提升监听性能
    poll: 1000 // 如果你的文件系统不支持自动监听（比如某些Windows环境），可以用轮询模式，单位毫秒
  }
};

4. 确保lite-server能检测到打包产物变化 #

如果默认配置下lite-server没感知到webpack打包后的文件更新，可以在项目根目录创建bs-config.json（lite-server的配置文件），指定要监听的文件范围：

{
  "files": ["./dist/**/*.{html,css,js}", "./src/**/*.scss"],
  "server": { "baseDir": "./" }
}

这样lite-server会监听dist下所有html、css、js文件的变化，以及src下的scss文件，确保任何修改都能触发页面刷新。

补充：为什么SCSS能实时更新？ #

大概率是你已经配置了SCSS的自动编译（比如用node-sass --watch），并且lite-server能直接监听到编译后的CSS文件变化。而JS需要经过webpack打包，所以必须让webpack自动完成打包步骤，再让lite-server感知到打包产物的变化。

现在你只需要运行npm start，修改JS文件后，webpack会自动重新打包，lite-server检测到bundle文件更新后就会自动刷新页面，再也不用手动执行npm run build啦！

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