Webpack not updating Bundle.js

Asked

Viewed 896 times

3

I’m new to this React and Webpack thing, and I’m studying a lot, but I’ve come 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 saved my files in the project and the webpack showing on the console that was compiled, the screen doesn’t show my changes. I’ve even tried going the localhost:8080/webpack-dev-server way 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 idea?

javascript html react bundle webpack

  • Tried using webpack -w? A tip, if you’re working with React, use the Create React App. So you don’t have to waste time with any config, just working with React.

  • Are you using the browser with the console on so it won’t cache? otherwise the browser tries to save the connection and doesn’t update the files. Try opening the address in another briwser.

  • @dsantoro already tried using -w and nothing. I’m creating an application from scratch so I understand how it works, maybe I’m forgetting to install something, I don’t know... It’s pretty weird

  • @Sergio also tried on other browsers, nothing...

  • @Guilhermeleonardoutzig now understood what you said. You want to use the webpack server’s hot Reload. Something like "start": "webpack && webpack-dev-server --inline --port XXXX" in your package.json. But I still suggest using the Creat Reatc App

  • @dsantoro Tranquil, I will research on this. Thank you!

Show 1 more comment

3 answers

1


One solution is to use the package webpack-dev-server, in addition to solving his problem he has a very legal remedies.

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

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

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

After that just rotate your front with npm run dev

0

Use the Browsersync.

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

in his webpack.config.js

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

to learn more access browser-Sync-webpack-plugin

-1

Enable the function to write to disk, as follows:

 devServer:
{
  writeToDisk: true
}

Browser other questions tagged javascript html react bundle webpack

You are not signed in. Login or sign up in order to post.