web-dev-qa-db-fra.com

Webpack hmr: __webpack_hmr 404 introuvable

J'utilise webpack-dev-server pour le remplacement à chaud du module. Cela fonctionne très bien, mais cette erreur continue de s'afficher dans la console toutes les deux secondes: GET http://mysite:8080/__webpack_hmr 404 (Not Found).

Voici mon 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'
        }]
    }


};

L'idée est que le serveur de développement doit transmettre toutes les demandes, sauf à partir de / et __webpack_hmr à mon backend (my-backend.localhost). Cela fonctionne bien pour tout sauf __webpack_hmr.

Y a-t-il quelque chose que je peux changer dans ma conf pour faire disparaître l'erreur?

webpackwebpack-dev-server
20
hansn

Corrigé en supprimant la ligne suivante sous entrée: 'webpack-hot-middleware/client?path=http://'+hostname+':'+port+'/__webpack_hmr'. Je ne sais pas pourquoi ça a marché. Voir la réponse d'Amin Ariana pour une explication de pourquoi cela peut fonctionner pour vous.

18
hansn

Cette ligne dans le tableau d'entrée ne fonctionne pas bien avec webpack-dev-server:

webpack-hot-middleware/client

car c'est une exigence de webpack-hot-middleware pour travailler avec tout serveur autre que webpack-dev-server (comme express ou certains autres).

J'ai rencontré ce problème de serveur mixte en suivant les didacticiels Webpack. Ils doivent le mettre à jour afin que le point d'entrée du fichier de configuration de Webpack utilisant webpack-dev-server ne nécessite pas un artefact produit par webpack-hot-middleware, qui essaie d'émettre à chaud les mises à jour du module du développeur dans un fichier personnalisé serveur en fonction.

Vous pouvez supprimer cette ligne du tableau d'entrée, ce qui, en cas d'utilisation de dev-server, devrait résoudre le problème.

Pour info cette ligne dans votre code est venue d'ici: https://github.com/webpack-contrib/webpack-hot-middleware où il est dit:

Ajouter webpack-hot-middleware/client?... dans le tableau d'entrée [config webpack]. Cela se connecte au serveur pour recevoir des notifications lorsque le bundle est reconstruit, puis met à jour votre bundle client en conséquence.

Sur la base de votre question, "J'utilise webpack-dev-server", vous n'utilisez donc pas "webpack-hot-middleware" et vous devez supprimer la ligne d'entrée.

7
Amin Ariana