2015-09-28

webpack-dev-serverで、他のバックエンドサーバーにプロキシする

webpack

webpack-dev-serverと、背後に別のサーバーがいた場合を組み合わせたいと思いまして。

要は、一部のパスについては後ろのサーバーにプロキシしたいのです。

そういう設定は可能なようですね。

javascript - Webpack-dev-server with bypass proxy - Stack Overflow

設定は、gulpなどでwebpack-dev-serverを作成する時に行います。webpack.config.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
		},
        proxy: {
            "/foo/*": "http://localhost:8080/"
        }
    }).listen(9000, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:9000/index.html");

        // keep the server alive or continue?
        callback();
    });
});

プロキシの設定をしているのは、この部分です。

        proxy: {
            "/foo/*": "http://localhost:8080/"
        }

この設定で、「/foo/」へのアクセスは「http://localhost:8080/foo/」へ、「/foo/bar」へのアクセスは「http://localhost:8080/foo/bar」へ転送されます。

2015-09-28

webpack-dev-serverで、URLから「webpack-dev-server」を削る

webpack

初めてwebpack-dev-serverを使った時、アクセスするURLに

http://localhost:8080/webpack-dev-server/index.html

こんな感じで「webpack-dev-server」が入るのが気になっていまして。

これ、なんとか除去できないかなーと思って調べたら、Automatic Refreshの設定の話だったみたいですね。

Automatic Refresh Inline mode

「webpack-dev-server」が入るのは、iframe modeで見ていたからみたいです。

というわけで、inline modeで設定します。

webpackの設定で、こんな感じに書けばよさそうです。

module.exports = {
    cache: true,
    entry: {
        app: [
            "webpack-dev-server/client?http://localhost:8080",
            "./src/scripts/main.js"
        ]
    },

これです、これ。

            "webpack-dev-server/client?http://localhost:8080",

すると、こんな感じのURLでアクセスできるようになります。

http://localhost:8080/index.html

設定ファイルに書く以外に、こういう記述をしてもいいみたいです。

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server?http://localhost:8080");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {...});
server.listen(8080);

こういう記述をHTMLに仕込む方法もあると…。

<script src="http://localhost:8080/webpack-dev-server.js"></script>

覚えておきましょう。

なお、最初に書いた設定ファイルの情報について、参考にしたのはこちらになります。

Configure Webpack Dev Server and React Hot Loader with Ruby on Rails - Kevin Old | Full-Stack JavaScript Engineer | React.js | Node.js

2015-09-28

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

webpack

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]

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

CLOVER🍀

That was when it all began.

webpack-dev-serverで、他のバックエンドサーバーにプロキシする

webpack-dev-serverで、URLから「webpack-dev-server」を削る

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