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

score 55 · Accepted Answer · answered Mar 23 '16 at 09:46

55

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

answered Mar 23 '16 at 09:46

Karthik Rana

1,261
1
10
20

Thank you! Been having the same issue and no tuts or docs have mentioned this! Cheers! – Ash May 05 '17 at 15:39
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`. – Chris Apr 07 '18 at 09:09
1

Ay, I'm glad this still is helping people. – Karthik Rana Jan 06 '21 at 15:43

score 32 · Answer 2 · answered Mar 04 '17 at 05:16

32

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.

answered Mar 04 '17 at 05:16

Andre Evangelista

3,390
1
21
14

1

Thank you, this helped a lot. – webtopf May 14 '17 at 02:40
1

I was able to figure out karthik-rana 's answer *because of* of this answer. Thanks @andre-evangelista. And +1 for the answer! – dance2die Jun 18 '17 at 15:04
1

Thanks a lot!! great, you help me found the problem !! :) – Moran Sep 16 '17 at 11:08
1

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). – djomlastic Mar 30 '18 at 01:11

score 19 · Answer 3 · answered Mar 22 '16 at 09:59

19

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.

answered Mar 22 '16 at 09:59

takacsmark

3,933
23
26

1

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. – Karthik Rana Mar 22 '16 at 10:28
1

in this case please double check wether the path of bundle.js in your script tag in your html is right. – takacsmark Mar 22 '16 at 10:42
1

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` – Karthik Rana Mar 22 '16 at 17:27

score 5 · Answer 4 · answered Jan 16 '21 at 01:47

5

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.

answered Jan 16 '21 at 01:47

dhilt

18,707
8
70
85

score 4 · Answer 5 · answered Sep 25 '22 at 01:25

4

The fix to this for me was:

  devServer: {
    devMiddleware: {
      writeToDisk: true,
    }
  }

https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

answered Sep 25 '22 at 01:25

Nate Gervenak

105
1
9

score 1 · Answer 6 · answered Apr 09 '19 at 08:55

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!

score 1 · Answer 7 · answered Oct 25 '21 at 09:21

1

Please refer to this - https://github.com/webpack/webpack-dev-server/issues/24 According to this, webpack dev server no longer writes to the disk. So, you wont be able to see the build file. Instead, it will be served from the memory. To get it working you have to set the proper path. Example: in index.html loads the build file from '/dist/main.js' so in webpack config file set the output.publicPath to '/dist/'

answered Oct 25 '21 at 09:21

Dinesh Gamage

11
1

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](/help/how-to-answer). – Community Oct 25 '21 at 10:28
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](/review/late-answers/30169678) – Ghost Ops Oct 25 '21 at 10:57

score 0 · Answer 8 · answered Dec 02 '20 at 05:10

In my case I was using VS Code and I had to restart it. I have noticed that vs code bugs up sometimes. The changes you make in configuration files (package.json, webpack.config.js etc.) do not take effect sometimes. So, in case you encounter a situation where something doesn't work even with the correct settings, just restart vs code.

I can't see any bug reports related to this. So that's strange. I'm thinking this bug is triggered if you change one of the configuration files some time later after you have already built the project multiple times.

If this is actually what's happening then it's a huge bug. I'll try switching to Visual Studio instead of Code and see if this still happens. If it does then it's probably an issue with webpack.

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

8 Answers8

Linked