Здравствуйте. Решил начать использовать webpack для:
1) генерации исходных данных для паблика (минификация, спрайты и т.д.)
2) использование hot module replacement.
3) и пр.
Возникли сложности при использовании HMR, перезагружается страница полностью.
HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because 76 is not accepted
...
Uncaught RangeError: Maximum call stack size exceeded
При переходе по ошибке:
webpackHotUpdate(0,{
/***/ 76:
/***/ function(module, exports) {
console.log('test');
/***/ }
})
//# sourceMappingURL=0.a2c058c04b843eab955f.hot-update.js.map
Как решается задача?
Что заметил
Если заходить по адресу:
localhost:8080/webpack-dev-server - страница не перезагружается, лог остается в консоли, собственно там увидел ошибку.
localhost:8080 - перезагружается страница.
UPD.
config.js
var webpack = require("webpack"),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
PathRewriterPlugin = require('webpack-path-rewriter');
module.exports = {
devtool: 'source-map',
entry: {
app: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/bundle.js'
]
},
output: {
path: '/public/',
filename: '[name].js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel"
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!sass!autoprefixer")
}, {
test: /\.(png|jpg)$/,
loader: "url?limit=3000&name=[name].[ext]?[hash]"
}, {
test: /.jade$/,
loader: PathRewriterPlugin.rewriteAndEmit({
name: 'index.html',
loader: 'jade-html?' + JSON.stringify({
pretty: true
}),
includeHash: true
})
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('[name].css', {
allChunks: true,
disable: process.env.NODE_ENV == 'development'
}),
new PathRewriterPlugin(),
new webpack.NoErrorsPlugin()
]
};
bundle.js
// Js
require('./js/index.js');
// Jade
require('./jade/index.jade');
index.js
console.log('test');
index.jade
doctype html
html
head
meta(charset='utf-8')
title(v-text='title')
meta(name='viewport', content='width=device-width, initial-scale=1, user-scalable=no')
link(href='[[ app.css ]]', media='all', rel='stylesheet')
script(src='[[ app.js ]]')
body
.div Тест
Есть желание настроить окружения для дев разработки с работой HMR, и иметь возможность сгенерировать файлы для продакшена.
При изменении js, css происходит релоад страницы. При изменении jade вообще никаких реакций.
