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

user_3599149 0
Viewed 35824

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
    },
};
webpack-dev-server webpack reactjs node.js javascript
8 Answers

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.

user_32119320

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!

user_105797350

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

user_134390200

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.

user_35798460
user_73817900
Related