Webpack 1.x 热模块替换模块未更新答案

【问题标题】：Webpack 1.x Hot Module Replacement Modules not updatingWebpack 1.x 热模块替换模块未更新
【发布时间】：2017-06-28 17:31:30
【问题描述】：

我正在尝试在 Visual Studio 2015 中将 Angular 2 与 HMR 集成。我有 2 个项目具有相同的文件内容和相同的目录结构，并且都将 HMR 与 Angular 2 一起使用。但每个项目的 HMR 都需要不同的更新捆绑。即对于 App1，它会查找 Typescript 文件（并且 JS 不会在 VS 中为它们生成），例如：

模块 A 依赖于 B，B 依赖于 C。如果 C 更新，则整个包都会更新，效果很好。

但在 App2 中，它会查找 1 个 Typescript 文件 main.ts 和 2 个 Javascript 文件，例如：

如果 C 更新，模块不会更新，除非我明确修改 C 的 Javascript 文件（由 VS 在构建时生成）！

如果我更改了其中的任何一个，我如何告诉 Webpack HMR 查找这些 Typescript 文件并更新捆绑包。

我的webpack.config.js 与两个项目相同，例如：

var path = require('path');
var webpack = require('webpack');

module.exports = {
resolve: { extensions: [ '', '.js', '.ts' ] },
entry: { 'main-client': './ClientApp/main.ts' },
output: {
    filename: '[name].js',
    path: path.join(__dirname, './wwwroot/dist'),
    publicPath: '/dist/'
},
module: {
    loaders: [
        { test: /\.ts$/, include: /ClientApp/, loader: 'ts' },
        { test: /\.html$/, loader: 'raw' }
    ]
}
 };

【问题讨论】：

标签： visual-studio angular typescript webpack webpack-hmr

【解决方案1】：

我遇到了同样的问题，并通过在 main.ts 中启用 HMR 来解决它。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

// Enables Hot Module Replacement.
declare var module: any;
if (module.hot) {
   module.hot.accept();
}

platformBrowserDynamic().bootstrapModule(AppModule);

【讨论】：