Webpack is taking 30 seconds to compile

Question

I'm using a webpack on the development, I'm not sure what is wrong with my webpack configuration as it is taking too much of time even if I make a single line of change in my code. When I start the app it takes 30 seconds to start and it continues to take the same time in all my subsequent changes.

Here is my webpack file

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: {
        login: './js/login.js',
        progress_page: './js/react_progress_bar.js',
        home: './js/home.js',
        new_design_landing: './js/design_landing.js',
        onboarding_preview: './js/preview.js',
        popup_message: './js/message.js'
    },
    output: {
        filename: '[name].js',
        //chunkFilename: 'modern_theme_[name].[hash].chunk.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'http://localhost:5050/'
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            //modules: true,
                            modules: {
                                // CSS name which we want to keep we can also
                                // change it to something like this [name]-[local]--[hash:base64:5]
                                localIdentName: '[name]',
                            },
                            url: false
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            //modules: true,
                            modules: {
                                // CSS name which we want to keep we can also
                                // change it to something like this [name]-[local]--[hash:base64:5]
                                localIdentName: '[name]-[local]',
                            },
                            url: false
                        }
                    },
                    {
                        loader: 'sass-loader'
                    },
                    {
                        loader: 'sass-resources-loader',
                        options: {
                            resources: './scss/abstracts/variables.scss'
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            TRACKING_ID: "x"
            NODE_ENV: JSON.stringify('production'),
            SERVER_ADDRESS: JSON.stringify('http://localhost:5050/'),
            WT_SITE: JSON.stringify('http://localhost:5050')
        }),
        new webpack.EnvironmentPlugin({
            ASSETS_PATH: "http://localhost:5050/",
            SERVER_ADDRESS: "http://localhost:5050/",
            AUTO_LOGOUT_TIMER: 7180000,
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
    watch: true,
    watchOptions: {
        poll: 500
    },
    optimization: {
        minimize: false
    },
    mode: 'development',
    devtool: false
};

Can you please help me point out what is wrong in this that it is taking 30 seconds for any change I make in the code.

React version used 16.8.6 webpack version 4.23.1

Here is how my package.json looks like

Answer 1

Try ignoring node_modules in your watchOptions:

  watchOptions: {
    ignored: /node_modules/
  }

Also, polling is generally underperformant. Why do you need it ? Are you developing inside vagrant/docker or using a networked file system ?

Unrelated tangent: You may not want to set NODE_ENV: production for development, as it will suppress helpful warnings in many libraries like react, react-redux etc.