Hello !

Je suis en train de me mettre à Webpack, en suivant le tuto du site, et j'ai un soucis dont je n'arrive pas à trouver la solution.
Je veux utiliser le HotMiddleWare (qui est frachement pratique), et également le proxy (j'ai mon backend en PHP).

J'arrive :

  • A faire fonctionner le HotMiddleWare sans le proxy
  • A faire fonctionner le proxy sans le HotMiddleWare

Mais
Quand je met en place le proxy après avoir configuré le HMR, le HMR n'est plus actif. Quand j'ouvre ma console, j'ai l'erreur suivante:

Firefox can’t establish a connection to the server at http://localhost:8090/__webpack_hmr.

Et effectivement, je n'ai pas accès à __webpack_hmr (si j'essaye de l'ouvrir en navigateur).

Je comprends pas bien d'ou peut venir l'erreur, car tout fonctionne bien de manière indépendante. Est-ce impossible de faire fonctionner les deux en même temps ? (ça serait assez triste quand même).

Si quelqu'un a une idée, ou une explication, je suis preneur !

Merci d'avance,

Tonio

@annexe, voici mes fichiers de configurations:

webpack.base.js

var path = require("path")
var root = path.resolve(__dirname, '../')

module.exports = {
    entry: {
        app: ['./src/css/jari.css', './src/js/front.js']
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    resolve: {
        extensions: ['', '.js', '.css']
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'eslint',
                exclude: /(node_modules|libs)/,
            }
        ],
        loaders: [
        {
            test: /\.css$/,
            loaders: ['style', 'css'],
        },
        {
            test: /\.(png|jpg|gif|jpeg|svg|eot|ttf)$/,
            loader: 'url',
            query: {
                'limit': 10000,
                'name': '[name]-[hash:7].[ext]'
            }
        }
        ]
    },
    plugins: [
    ],
    eslint: {
        configFile: path.resolve(root, './.eslintrc'),
        formatter: require('eslint-friendly-formatter')
    }
}

webpack.dev.js

var config = require('./webpack.base')
var webpack = require('webpack')

config.plugins = config.plugins.concat([
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
    ])

module.exports = config

dev.js

var webpack = require('webpack')
var config = require('./webpack.dev')
var chokidar = require('chokidar')
var webpackDevServer = require('webpack-dev-server')
var port = 8090
config.entry.app.unshift('webpack-hot-middleware/client')
var compiler = webpack(config);
var hotMiddleWare = require('webpack-hot-middleware')(compiler)
/*
chokidar.watch('./*.html').on('all', function(){
    hotMiddleWare.publish({action: 'reload'})
})

chokidar.watch('./*.php').on('all', function(){
    hotMiddleWare.publish({action: 'reload'})
})
*/
var server = new webpackDevServer(compiler, {
    hot: true,
    proxy: {
        "*": {
            target: "http://localhost/",
            changeOrigin: true,
        }
    },
    contentBase: './',
    quiet: false,
    noInfo: false,
    publicPath: config.output.publicPath,
    stats: { colors: true }
})

server.use(hotMiddleWare)

server.listen(port, 'localhost', function(err) {
    if (err) {
        console.log(err)
    }else{
        console.log("J'écoute sur le port " + port)
    }
})

1 réponse


Bonjour,

Je n'ai pas beaucoup de temps pour t'aider, mais comme j'ai un peu galéré à faire marcher Browserify + Hot reloader, je te donne qq indices.

Notamment la piste de ce github : https://github.com/roots/sage/tree/master/assets/build

En gros, tu peux prendre tel quel le fichier : webpack.plugin.browsersync.js dont tu trouves l'exemple d'utilisation du plugin dans la config "watch" (fichier ...watch.js). Si tu as le temps, tu peux lire le fichier browwsersync, c'est pas compliqué à comprendre.

et en mode "watch", tu ne dois pas oublier d'ajouter ceci : https://github.com/roots/sage/blob/master/assets/build/util/addHotMiddleware.js à tes "entry" pour faire fonctionner le hot reloader.

Bon courage ;)