webpack-dev-server not recompiling the output file

Question

This is my webpack file, nothing special

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        publicPath: '/public/scripts/',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
        watchContentBase : true, 
        publicPath: '/scripts/'
    }
}

However, when I run 'npm run webpack-dev-server', I get the normal node.js output but the website does not update when new changes are made. I deleted the bundle.js file and when I ran it again, I got an error saying 'bundle.js cannot be found'. I figured out that bundle.js is not being recompiled at all when running this command.

I am on windows if that makes any difference. Any help would be appreciated.

EDIT: Below is my folder structure.

Nikita Chayka · Accepted Answer · 2020-10-31T22:09:24.253

0

You need to use watchContentBase option for devServer:

watchContentBase:true

Would also recommend setting hot:true for modules replecement and open:true - so when you will run the dev server it will automatically open you your site at default browser. More on devServer options you could find here - https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-

EDIT

So after quite long conversation in chat, here are the results:

Still to "live-reload" the page you should use

watchContentBase

But there were other issues in this case - publicPath in devServer and outputPath were not the same and then index.html should reference bundle.js under /public/scripts

New webpack.config.js:



    const path = require('path')
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, '/public/scripts'),
            publicPath: '/public/scripts',
            filename: 'bundle.js'
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }]
        },
        devServer: {
            contentBase: path.resolve(__dirname, 'public'),
            watchContentBase : true, 
            publicPath: '/public/scripts'
        }
    }

New src for bundle in Index.html: /public/scripts/bundle.js

edited Oct 31 '20 at 22:09

answered Oct 31 '20 at 17:33

Nikita Chayka

2,057
8
16

Those changes are not doing anything. The issue is the output file is not being compiled when running npm run webpack-dev-server – python_help Oct 31 '20 at 18:24
Oh, ok, got it, have a look here - https://stackoverflow.com/questions/36150456/webpack-dev-server-not-bundling-even-after-showing-bundle-valid-message publicPath under devServer should match path under output – Nikita Chayka Oct 31 '20 at 18:43
Updated to match it, still is not recompiling. It seems there is no way for dev-server to recompile the pages and I'll have to run webpack to update the output first. I've tried every option available and nothing is working. Maybe this wasn't meant for windows? – python_help Oct 31 '20 at 19:17
No, it is working fine, i actually have it working fine for windows, it is something wrong with your configuration or folder structure, could you update your original question with latest config and also folder structure you have? – Nikita Chayka Oct 31 '20 at 19:20
I updated the OP with my folder structure and updated webpack file – python_help Oct 31 '20 at 20:01
Ok, you mean that you don't see bundle file created after you start dev-server? It actually should not be created, cause it is in memory, you could see here the discussion - https://stackoverflow.com/questions/38418372/webpack-dev-server-is-not-creating-the-bundle-file As for bundle.js not found - actually it might be problem of your index.html (wrong path there) - https://stackoverflow.com/questions/51614049/webpack-4-bundle-js-not-found Can you provide your index.html also? – Nikita Chayka Oct 31 '20 at 20:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223919/discussion-between-python-help-and-nikita-chayka). – python_help Oct 31 '20 at 20:26

webpack-dev-server not recompiling the output file

1 Answers1