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

初めて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