使用Angular2的Webpack Hot Reload？

Question

我遇到了webpack热重装中间件和角度2这个最奇怪的问题。我有一个简单的index.html执行<my-app></my-app>。我的webpack配置也非常简单。它在下面。

我的应用是HMR文档的克隆（http://andrewhfarmer.com/webpack-hmr-tutorial/）;

app.use(webpackDevMiddleware(compiler, {
    hot: true,
    filename: 'bundle.js',
    publicPath: '/',
    stats: {
        colors: true,
    },
    historyApiFallback: true
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log,
    path: '/__webpack_hmr',
    heartbeat: 10 * 1000
}));

首次加载时，效果很好。应用程序出现了，index.html中有<script type="text/javascript" src="http://localhost:3000/main.js"></script>。然后我在应用程序中更改某些内容作为测试，我可以在控制台中看到webpack重建成功，但浏览器没有更新。所以我尝试重新加载，应用程序停留在加载横幅上，因为脚本标记似乎完全消失。

有没有人见过这个？我有什么想法可以让它发挥作用吗？

var webpack = require('webpack');
var helpers = require('./webpack.helpers');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map',
    entry: [
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        './src/client/polyfills.ts',
        './src/client/vendor.ts',
        './src/client/main.ts'
    ],
    module: {
        preLoaders: [
            {test: /\.ts$/, loader: 'tslint'}
        ],
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts-loader?configFileName=src/client/tsconfig.json', 'angular2-template-loader']
            },
            {test: /\.json$/, loader: "json-loader"},
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {test: /\.scss$/, loaders: ['raw', 'sass']},
            {test: /\.less/, loader: "style!css!less"},
            {test: /\.png$/, loader: "url-loader?prefix=img/&limit=5000"},
            {test: /\.jpg$/, loader: "url-loader?prefix=img/&limit=5000"},
            {test: /\.gif$/, loader: "url-loader?prefix=img/&limit=5000"},
            {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
            {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
            {test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&mimetype=image/svg+xml'},
            {test: /\.html$/, loader: 'raw'}
        ],
        postLoaders: []
    },
    output: {
        path: helpers.root('../../dist/public'),
        publicPath: 'http://localhost:3000/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },
    resolve: {
        cache: false,
        root: helpers.root(),
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    tslint: {
        emitErrors: false,
        failOnHint: false
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/client/public/index.html',
            chunksSortMode: 'dependency'
        }),
        new CopyWebpackPlugin([
            {from: './src/client/public'}
        ]),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};