webpack-dev-serverの設定を見ていると、なんかHot Reload?的なものができそうだったので。
Hot Module Replacement with node.js API
通常でもリロードっぽい挙動をしているのですが、ちょっと設定してみました。
webpackの設定。webpack.config.jsなどの名前で作成します。
module.exports = { cache: true, entry: { app: [ "webpack-dev-server/client?http://localhost:8080", "webpack/hot/dev-server", "./src/scripts/main.js" ] },
これを追加します。
"webpack/hot/dev-server",
プラグインも追加。
plugins: [ new webpack.HotModuleReplacementPlugin(),
gulpの設定にも追加。
gulpfile.js
var gulp = require("gulp"); var gutil = require("gulp-util"); var webpack = require("webpack"); var WebpackDevServer = require("webpack-dev-server"); var webpackConfig = require("./webpack.config.js"); // 省略… gulp.task("webpack-dev-server", function(callback) { var config = Object.create(webpackConfig); var compiler = webpack(config); new WebpackDevServer(compiler, { publicPath: "/" + config.output.publicPath, stats: { colors: true }, hot: true }).listen(8080, "localhost", function(err) { if(err) throw new gutil.PluginError("webpack-dev-server", err); gutil.log("[webpack-dev-server]", "http://localhost:8080/index.html"); // keep the server alive or continue? callback(); }); });
ここで、「hot」をtrueにします、と。
new WebpackDevServer(compiler, { publicPath: "/" + config.output.publicPath, stats: { colors: true }, hot: true })
設定後の挙動ですが、特にHot Module Replacementを設定していない時は、スクリプトを修正した時にこういう表示になるものの
webpack: bundle is now INVALID. Hash: 861f2fcf012e5400f62d Version: webpack 1.12.2 Time: 4748ms Asset Size Chunks Chunk Names app.js 160 kB 0 [emitted] app app.js.map 1.29 MB 0 [emitted] app chunk {0} app.js, app.js.map (app) 461 kB [rendered]
Hot Module Replacementを設定した場合はこういう表示になります。
webpack: bundle is now INVALID. Hash: 734a528b855816ac0bfd Version: webpack 1.12.2 Time: 4904ms Asset Size Chunks Chunk Names app.js 166 kB 0 [emitted] app 0.3f14d2556683574b3dc4.hot-update.js 201 bytes 0 [emitted] app 3f14d2556683574b3dc4.hot-update.json 36 bytes [emitted] app.js.map 1.34 MB 0 [emitted] app 0.3f14d2556683574b3dc4.hot-update.js.map 1.11 kB 0 [emitted] app chunk {0} app.js, 0.3f14d2556683574b3dc4.hot-update.js, app.js.map, 0.3f14d2556683574b3dc4.hot-update.js.map (app) 461 kB [rendered]
効果のほどはわかってませんが…。