我有一个最奇怪的问题与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重建成功,但浏览器没有更新 . 所以我尝试重新加载,应用程序停留在加载 Banner 上,因为脚本标记似乎完全消失了 .
谁看过这个吗?有什么想法我可以让它工作?
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()
]
};