Webpack-dev-server not bundling even after showing bundle valid message

Question

I've set up a basic react application with webpack but I couldn't get the webpack-dev-server running properly.

I've installed webpack-dev-server globally and tried running the command sudo webpack-dev-server --hot as hot reloading was required.

The project seems to be working fine with just webpack cmd. It builds into my build folder and I can get it working via some server but it wont work with webpack-dev-server. From terminal its clear that the build process has completed with no error being thrown [webpack: bundle is now VALID.] and its in fact watching properly because on any change it does trigger the build process but it doesn't really gets built [it doesn't serve my bundle.js]. I tried changing the entire config and still couldn't get the issue resolved.

It would be much appreciated if someone can help.

Following is my webpack.config.js file.

var path = require('path');  module.exports = {     devtool: '#inline-source-map"',      watch: true,     colors: true,     progress: true,      module: {         loaders: [{             loader: "babel",             include: [                 path.resolve(__dirname, "src"),             ],             test: /\.jsx?$/,             query: {                 plugins: ['transform-runtime'],                 presets: ['es2015', 'react', 'stage-0'],             }         }, {             loader: 'style!css!sass',             include: path.join(__dirname, 'src'),             test: /\.scss$/         }]     },      plugins: [],     output: {         path: path.join(__dirname, 'build/js'),         publicPath: '/build/',         filename: '[name].js'     },     entry: {         bundle: [             './src/index.js'         ]     },      devServer: {         contentBase: "./",         inline: true,         port: 8080     }, }; 

Answer 1

I've got the issue resolved by myself. Silly as it sounds but the issue was with the publicPath under the output object. It should match the path property instead of just /build/, i.e.,

output: {     path: path.join(__dirname, 'build/js'),     publicPath: '/build/js', // instead of publicPath: '/build/'      filename: '[name].js' }, 

Answer 2

In my case I had to check where the webpack is serving the file.

You can see it: http://localhost:8080/webpack-dev-server

Then I could see my bundle.js path > http://localhost:8080/dist/bundle.js

After that I used that /dist/bundle.js in my index.html <script src="/dist/bundle.js"></script>

Now it refreshes any file changes.