webpack-dev-server 热加载不适用于 boot2docker答案

【问题标题】：webpack-dev-server hot loading not working with boot2dockerwebpack-dev-server 热加载不适用于 boot2docker
【发布时间】：2015-06-17 23:54:39
【问题描述】：

我目前正在尝试通过 boot2docker 让 webpack-dev-server 与 hot loading 一起工作。

我使用docker-osx-dev 在我的容器中正确提取了文件更改，但socket.io 热重载不起作用。

原因是我在运行服务器时设置了--host 0.0.0.0，以便在我的主机上可以访问它。然而，这意味着它正在寻找位于0.0.0.0 的socket.io 服务器。

所以当我加载页面时，它会尝试连接到http://0.0.0.0:8080/socket.io/?EIO=3&transport=polling&t=1434584701670-0，我的领事出现错误。实际上它应该连接到http://dockerhost:8080/socket.io/。

有没有办法告诉webpack-dev-server 使用不同的主机来获取socket.io 连接？

The Github issue 63 可能指的是同一个问题，但没有解决。

【问题讨论】：

标签： docker boot2docker webpack webpack-dev-server

【解决方案1】：

我 switched 使用 https://github.com/brikis98/docker-osx-dev，它使用 rsync 在 OS X 和容器之间同步文件，还为 http://dockerhost 添加了一个主机条目，允许 socket.io 从 OS X Web 浏览器正确轮询容器.

【讨论】：

【解决方案2】：

经过几个小时的搜索，我找到了found，该内联选项只是添加了入口点。您可以通过将 options.host（在您的情况下为 0.0.0.0）替换为 localhost 或其他主机来修复此错误。

检测文件更改的最简单方法是将watchOptions.poll 设置为true。

【讨论】：

【解决方案3】：

所以我意识到，即使它在控制台中给我一个错误，通过尝试连接到错误的主机，它也连接到了正确的主机，所以热加载确实有效。

最后，我的配置看起来像这样：

var entry = ["./config/mainApp"];
var loaders = {
    "jsx": ["react-hot", "babel-loader?stage=0"]
    "js": {
        loader: "babel-loader?stage=0",
        include: path.join(__dirname, "app")
    },
    "json": "json-loader",
    "json5": "json5-loader",
    "txt": "raw-loader",
    "png|jpg|jpeg|gif|svg": "url-loader?limit=10000",
    "woff|woff2": "url-loader?limit=100000",
    "ttf|eot": "file-loader",
    "wav|mp3": "file-loader",
    "html": "html-loader",
    "md|markdown": ["html-loader", "markdown-loader"],
    "css": "style-loader!css-loader"
};
var preloaders = {
    "js": "source-map-loader"
};
var plugins = [
    new webpack.PrefetchPlugin("react"),
    new HtmlWebpackPlugin({
        inject: true,
        template: "app/index.html"
    }),
    new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment")
];
module.exports = {
    entry: entry,
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js",
        sourceMapFilename: "bundle.map",
        pathinfo: true
    },
    module: {
        loaders: loadersByExtension(loaders),
        preloaders: loadersByExtension(preloaders)
    },
    devtool: "eval-source-map",
    debug: true,
    resolve: {
        root: path.join(__dirname, "app"),
        extensions: ["", ".web.js", ".js", ".jsx"]
    },
    plugins: plugins,
    devServer: {
        port: 8080,
        host: "0.0.0.0",
        inline: true
    }
};

我是这样开始的：

webpack-dev-server --config webpack-hot-dev-server.config.js --colors --progress --hot

完整示例，check out my the initial stages of my app that just has this boilerplate + react

【讨论】：

上面的样板文件可以在任何地方使用吗？我刚得到一个 404 并且很想使用 docker 进行热重载
@Joshua 抱歉，刚刚修复了链接。

【解决方案4】：

经过一番摸索，解决办法是：

1- 将主机名添加到 /etc/hosts

YOUR_DOCKER_MACHINE_IP    devapp (or any other hostname you choose)

2- 在您的 webpackconfig 条目中

entry: 
    main: [
        'webpack-dev-server/client?http://devapp:YOUR_EXPOSED_PORT',
        'webpack/hot/only-dev-server',
        YOUR_SCRIPT_FILE
    ]
}

【讨论】：