Webpack Watch模式下AngularJS 1.6应用代码不执行问题

这问题确实挺闹心的——好好的watch模式突然抽风，改完代码刷新没反应，重启又好，还时不时复发。结合你的配置和描述，我整理了几个可能的原因和对应的解决方案：

一、核心问题：Watch模式下入口文件未执行 #

1. ts-loader缓存导致旧代码未更新 #

ts-loader默认会开启编译缓存来提升速度，但在某些场景下（比如类型定义变动、别名路径调整），缓存可能失效或者不更新，导致watch模式下编译的还是旧代码。

解决方案：修改webpack.common.js里的ts-loader配置，强制禁用缓存：

{ 
  test: /\.ts$/, 
  loader: "ts-loader", 
  exclude: /node_modules/,
  options: {
    cacheDirectory: false // 禁用编译缓存
  }
}

2. WatchIgnorePlugin配置过于严格 #

你配置了WatchIgnorePlugin([ /\.js$/, /\.d\.ts$/ ])，但ts-loader编译生成的.js文件其实是Webpack依赖树的一部分，忽略.js文件可能导致Webpack无法正确追踪到入口文件的变动关联，尤其是当你的AngularJS模块依赖这些编译后的js文件时。

解决方案：暂时移除对.js的忽略，只保留.d.ts的忽略：

new webpack.WatchIgnorePlugin([ /\.d\.ts$/ ])

3. CommonsChunkPlugin在Webpack 3中的watch模式bug #

Webpack 3的CommonsChunkPlugin存在一些已知的watch模式下的chunk引用问题，可能导致入口chunk（app.bundle.js）没有被正确加载，进而入口文件Application.ts的代码没执行。

解决方案：

• 给CommonsChunkPlugin指定明确的filename，避免自动命名导致的引用错误：

new webpack.optimize.CommonsChunkPlugin({ 
  names: ["vendor"],
  filename: "./dist/vendor.hotels.bundle.js" // 明确指定vendor包的文件名
})

• 条件允许的话，考虑升级到Webpack 4+（Webpack 3已经停止维护很久了，很多旧bug都在新版本里修复了）

二、衍生问题：Watch构建与首次构建包差异极大 #

这个问题通常和Webpack 3的增量编译逻辑有关，当使用了tsconfig paths自动转换别名时，可能导致Webpack在watch模式下重新计算整个依赖树，而不是只编译变动的文件。

解决方案：

1. 手动配置webpack别名，替代convert-tsconfig-paths-to-webpack-aliases工具，避免自动转换带来的解析问题：

resolve: { 
  extensions: [".ts", ".js"], 
  alias: {
    "Models": path.join(__dirname, "src/app/models/index"),
    "Utilities": path.join(__dirname, "src/app/utilities"),
    "App": path.join(__dirname, "src/app")
  }
}

2. 调整devtool类型，inline-source-map会把sourcemap嵌入到bundle里，导致文件差异变大，试试换成更轻量化的选项：

devtool: "cheap-module-source-map"

临时Workaround（如果上述方案暂时无效） #

如果紧急需要恢复开发效率，可以用nodemon监听关键文件（比如tsconfig.json、webpack配置文件、src目录下的ts文件），自动重启Webpack watch进程：

1. 安装nodemon：npm install nodemon --save-dev
2. 在package.json里添加脚本：

"scripts": {
  "watch": "nodemon --watch src --watch tsconfig.json --watch webpack.*.js --exec \"webpack --config webpack.dev.js --watch\""
}

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