AngularJS项目中配置Webpack与lite-server热重载求助

我是Webpack新手，正尝试在AngularJS应用中配置Webpack与lite-server热重载，会逐步说明目前已完成的操作，希望能得到故障排查帮助。

我已创建的package.json内容如下：

{ 
  "name": "app", 
  "version": "2.0.0", 
  "description": "front", 
  "main": "app.js", 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "start": "lite-server" 
  }, 
  "author": "", 
  "license": "ISC", 
  "dependencies": { 
    "angular": "^1.6.9", 
    "angular-route": "^1.6.9", 
    "webpac..." 
  }
}

初步排查方向（基于常见配置问题） #

既然你还没提到具体的报错或异常表现，先给你几个核心配置点去检查：

• 先补全并确认Webpack相关依赖：你的package.json里webpac...明显没写完，至少要安装webpack、webpack-cli（Webpack 4+版本需要），要是想实现模块热替换，还需要webpack-dev-server或者webpack-hot-middleware
• 对齐文件路径配置：lite-server默认监听项目根目录或指定的baseDir，你需要确保Webpack的output.path指向lite-server能访问到的目录（比如dist），同时在index.html里正确引入Webpack打包后的输出文件（比如<script src="dist/bundle.js"></script>）
• 调整启动脚本：目前你的start只启动了lite-server，但Webpack需要实时编译代码，建议用concurrently包来并行执行Webpack监听和lite-server，先安装concurrently，然后修改脚本：

  "scripts": {
    "start": "concurrently \"webpack --watch --mode development\" \"lite-server\"",
    "build": "webpack --mode production"
  }
  

• 开启Webpack热重载：如果要实现真正的热替换（不是页面刷新），需要在Webpack配置文件里添加HotModuleReplacementPlugin，并配置热重载相关逻辑：

  // webpack.config.js
  const webpack = require('webpack');
  
  module.exports = {
    // ...其他基础配置（入口、输出、loader等）
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      hot: true,
      open: false
    }
  }
  

• 自定义lite-server配置：如果默认配置不满足需求，可以在项目根目录创建bs-config.json，指定监听目录、端口等参数，比如：

  {
    "baseDir": "./dist",
    "port": 3000,
    "files": ["./dist/**/*"]
  }
  

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