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 :
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)
}
})
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 ;)