Webpack cache busting with hashes not working

Webpack cache busting still working in here. If you change the code, webpack will recreate the file with the different hash (https://webpack.js.org/guides/caching)

What you want is called hot reload. You can read more about it in https://webpack.js.org/concepts/hot-module-replacement/

To use hot reload, you should create new config:

const AssetsPlugin = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: "./js/main.js",
output: {
    path: __dirname + '/static/',
    publicPath: '',
    filename: "bundle.js", // remove hash
},
resolveLoader: {
moduleExtensions: ['-loader']
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['react', 'es2015', 'stage-0']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader',
        },
        {
            test: /\.css$/,
            loader: 'css-loader',
            query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
        }
    ]
},
plugins: [
    // new CleanWebpackPlugin(['static/bundle*.js'], {watch: true}), comment it
    // new AssetsPlugin({
    //        filename: 'static/webpack.assets.json',
    //        prettyPrint: true
    // }), and this 
],
devServer: {
  contentBase: path.join(__dirname, "static"),
  compress: true,
  port: 9000
}
};

And run with: webpack-dev-server -c 'your new config' --hot

The index.html is served only once to the browser. The code written inside this html file to load the assets also runs for the one time only in the browser. Once you make changes in your code, webpack can create new bundle with new hash name but your browser doesn't aware of this and won't download new assets file by itself. This is the reason why your changes are not reflecting in your browser. Cache busting is commonly used for production build. For development environment hot module reloading is used. Below is an example of hmr.

webpack.config.dev.js

/**
 * Created by ishan.trivid on 28-06-2016.
 */
import webpack from "webpack";
import path from "path";

export default {
debug: true,
devtool: "cheap-module-eval-source-map",
noInfo: true,
entry: [
    "eventsource-polyfill", // necessary for hot reloading with IE
    "webpack-hot-middleware/client?reload=true", //note that it reloads the page if hot module reloading fails.
    "./src/index"
],
target: "web",
output: {
    path: __dirname + "/dist", // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "/",
    filename: "bundle.js"
},
devServer: {
    contentBase: "./src"
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
],
module: {
    loaders: [
        {test: /\.js$/, include: path.join(__dirname, "src"), loaders: ["babel"]},
        {test: /(\.css)$/, loaders: ["style", "css"]},
        {test: /\.(png)$/, loader: "url-loader?limit=1000000"},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
        {test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000"},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
    ]
}
};

srcServer.js

import express from "express";
import webpack from "webpack";
import path from "path";
import config from "./webpack.config.dev";
import open from "open";

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

app.use(require("webpack-hot-middleware")(compiler));

app.get("*", function(req, res) {
    res.sendFile(path.join( __dirname, "../src/index.html"));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open(`http://localhost:${port}`);
    }
});

Now add below command in script section of package.json

start: "babel-node srcServer.js"

Now run "npm run start" command in terminal

here is example from my config file

install babel hmre plugin

npm install --save-dev babel-preset-react-hmre


module.exports = {
  // entry and output options

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel",
      include: __dirname,
      query: {
        presets: [ 'es2015', 'react', 'react-hmre' ]
      }
    }]
  }
}

and edit your start script in package.json to enable the hot option:

"start": "webpack-dev-server --progress --inline --hot",