CLOVER🍀

That was when it all began.

webpack-dev-serverで、Hot Module Replacementの設定をする

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]

効果のほどはわかってませんが…。