Webpack not updating bundle.js

Navigation
2

I'm new to this React and Webpack stuff, and I'm studying hard, but I came up with 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 that even though I save my files in the project and the webpack showing in the console that was compiled, the screen does not show my changes. I've even tried to go through the localhost path: 8080 / webpack-dev-server to see if my changes were there, and they were!

Even though they are there, my HTML does not update, forcing me to run ./node-modules/.bin/webpack again to work.

Does anyone have any ideas?

    
asked by anonymous 29.05.2017 / 17:39

2 answers

1

One solution is to use the webpack-dev-server package and resolve your issue he has resources well legal .

Well, in your package.json you can create a script like this: 

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

Note that at the end of the script dev I have the parameter --hot , this is the guy responsible for doing the hot deploy and refresh the browser every time I save the code. p>

After that, just run your front with npm run dev

    
29.06.2017 / 16:14
0

Use BrowserSync.

to install npm i -D browser-sync browser-sync-webpack-plugin

on your webpack.config.js

const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); // ... plugins: [ new BrowserSyncPlugin({ host: 'localhost', port: 3000, server: { baseDir: ['public'] } }) ]

To learn more visit browser-sync-webpack-plugin

    
30.05.2017 / 16:32
Convert number to date List elements of the has_many: through relationship