Source:  Twitter logo

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

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'
},
48 users liked answer #0dislike answer #048
Karthik Rana profile pic
Karthik Rana

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.

30 users liked answer #1dislike answer #130
Andre Evangelista profile pic
Andre Evangelista

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.

18 users liked answer #2dislike answer #218
takacsmark profile pic
takacsmark

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.

5 users liked answer #3dislike answer #35
dhilt profile pic
dhilt

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!

1 users liked answer #4dislike answer #41
Oleksandr Grin profile pic
Oleksandr Grin

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/'

1 users liked answer #5dislike answer #51
Dinesh Gamage profile pic
Dinesh Gamage

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.

0 users liked answer #6dislike answer #60
Aj_ profile pic
Aj_

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).