web-dev-qa-db-ja.com

Webpack hmr：__webpack_hmr 404が見つかりません

ホットモジュールの交換にwebpack-dev-serverを使用しています。正常に機能していますが、このエラーは数秒ごとにコンソールに表示され続けます：GET http://mysite:8080/__webpack_hmr 404 (Not Found)。

これが私のwebpack.config.jsです：

var webpack = require('webpack'),
    hostname = 'mysite',
    port = 8080;

module.exports = {
    entry: [
        'babel-polyfill',
        './src/js/main.js',
        './dev/requireCss.js',
        'webpack/hot/dev-server',
        // I'm assuming the fault lies in the following line, but I can't figure out what's wrong
        'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'
    ],
    output: {
        path: __dirname + '/webpack',
        filename: "bundle.js",
        publicPath: 'http://'+hostname+':'+port+'/'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loaders: ['react-hot', 'babel-loader?presets[]=react&presets[]=es2015']
        } // removed some loaders for brevity
        ]
    },
    resolve: {
        extensions: ['', '.json', '.js', '.jsx']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: "source-map",
    devServer: {
        contentBase: __dirname + '/dev',
        hot: true,
        proxy: [{
            path: /\/(?!__webpack_hmr).+/, // I get the same error if I change this to 'path: /\/.+/'
            target: 'http://my-backend.localhost'
        }]
    }


};

アイデアは、開発サーバーが/および__webpack_hmr以外のすべてのリクエストをバックエンド（my-backend.localhost）に転送するというものです。これは、__webpack_hmrを除くすべてに対して正常に機能します。

エラーを消すためにconfで変更できるものはありますか？

webpackwebpack-dev-server
20
hansn

entryの下の次の行を削除することで修正されました：'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'。 なぜ機能したのかわかりません。 これがなぜあなたのために働くかもしれないかについての説明のためのアミン・アリアナの答えを見てください。

18
hansn

エントリ配列の次の行は、webpack-dev-serverでうまく機能しません。

webpack-hot-middleware/client

webpack-hot-middleware以外のサーバー（expressなど）で作業するためのwebpack-dev-serverの要件であるためです。

Webpackのチュートリアルに従って、この混合サーバーの問題に遭遇しました。 webpack-dev-serverを使用したWebpackの構成ファイルのエントリポイントがwebpack-hot-middlewareによって生成されたアーティファクトを必要としないように更新する必要があります。それに応じてサーバー。

エントリ配列からその行を削除できます。これは、dev-serverを使用する場合に問題を解決するはずです。

参考までに、コードのその行はここから来ました： https://github.com/webpack-contrib/webpack-hot-middleware

[webpack config's]エントリ配列にwebpack-hot-middleware/client?...を追加します。これにより、バンドルが再構築され、それに応じてクライアントバンドルが更新されると、サーバーに接続して通知を受信します。

「webpack-dev-serverを使用しています」という質問に基づいて、「webpack-hot-middleware」を使用していないため、エントリ行を削除する必要があります。

7
Amin Ariana