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
    },
};

Solution 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'
},

Solution 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.

Solution 3

webpack-dev-server serves your bundle.js from memory. It won't generate the file when you run it. So bundle.js is not present as a file in this scenario.

If you wan't to use bundle.js, for example to optimize it's size or test your production deployment, generate it with webpack using the webpack command and serve it in production mode.

Solution 4

By the way, started from Webpack v4 it is possible to write in-memory assets to disk:

  devServer: {
    contentBase: "./",
    port: 8080,
    writeToDisk: true
  }

See doc.

Solution 5

Dev-server keeps the compiled file in memory, and I can't access it directly... BUT! THE SOLUTION is that you have no need to access it, in development(even when you run your project on node server or localhost) use localhost:8080 to access your page, and that's where webpack-dev-server is serving your page and you can feel all advantages of using it(live reload!), BUT! it doesn't compile your bundle.js, SO! before production, you need to manually run webpack build command, and that's it! there is no way for dev-server to compile your bundle.js file! Good Luck!

View more solutions

Comments

[Karthik Rana]

Hi.. thank you for the response.. I'm aware of the fact that the file won't be generated. In my case its not serving from memory, ie, I'm not getting the updates on my localhost.

[takacsmark]

in this case please double check wether the path of bundle.js in your script tag in your html is right.

[Karthik Rana]

Yes its correct and I believe that's why i'm getting it working while I do webpack. . In my case its build/js/bundle.js

[Ash]

Thank you! Been having the same issue and no tuts or docs have mentioned this! Cheers!

[webtopf]

Thank you, this helped a lot.

[dance2die]

I was able to figure out karthik-rana 's answer because of of this answer. Thanks @andre-evangelista. And +1 for the answer!

[Moran]

Thanks a lot!! great, you help me found the problem !! :)

[djomlastic]

This actually explains it (+1). I ended up changing publicPath as the accepted answer suggested, but it does not need to match the output path (mine doesn't).

[Chris]

I might add based on what I'm seeing, that your public path should have a trailing slash. When using the technique described in Andre Evangelista's answer, I could see that webpack dev server was serving my js file from distmain.js rather than dist/main.js.

[Karthik Rana]

Ay, I'm glad this still is helping people.

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

[Ghost Ops]

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review