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