javascript – Webpack not updating bundle.js

Question:

I'm new to this React and Webpack thing, and I'm studying a lot, but I've hit a problem that I'm not finding a way to solve.

const webpack = require('webpack')

module.exports = {
    entry: './html/js/index.jsx',
    output: {
        path: __dirname + '/deploy/assets/',
        publicPath: '/deploy/assets/',
        filename: './js/bundle.js'
    },
    devServer: {
        port: 8080,
        contentBase: './deploy'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react'],
                plugins: ['transform-object-rest-spread']
            }
        }]
    }
}

This is my webpack.config.js.

The problem is, even though I'm saving my files in the project and the webpack showing in the console that it was compiled, the screen doesn't show my changes. I've even tried going through localhost:8080/webpack-dev-server to see if my changes were there, and they were!

Even though they're there, my HTML doesn't update, forcing me to run ./node-modules/.bin/webpack again to get it working.

Does anyone have any ideas?

Answer:

One solution is to use the webpack-dev-server package, in addition to solving your problem it has some pretty cool features .

Well, in your package.json you can create a script as follows:

"scripts": {
    "dev": "webpack-dev-server --progress --colors --inline --hot"
  }

Notice that at the end of the dev script I have the --hot parameter, this is the guy responsible for hot deploying and updating the browser every time I save the code.

After that, just run your front with npm run dev