webpack is compile time is very slow

Question

My webpack is going very slow when it starts and when theres a change - compiling. Actually making development very slow right now. I'm only using greensock as the vendor but nothing else. I'm using only a few images too.. not sure.

Here is the code:

const path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

// const ASSET_PATH = process.env.ASSET_PATH || '/'; ,
//publicPath: '/dist'

var isProd = process.env.NODE_ENV === 'production';
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];

const VENDOR_LIBS =['gsap'];

var cssProd = ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
        'css-loader', 'sass-loader'
    ],
    publicPath: '/dist'
});

var cssConfig = isProd ? cssProd : cssDev;

module.exports = {
    entry: {
        index: './src/js/index.js',
        vendor: VENDOR_LIBS
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js'
    },
    devServer: {
        //contentBase: path.join(__dirname, "/dist"),
        compress: true,
        port: 3000,
        hot: true,
        stats: "errors-only",
        open: true
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },
    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use:[
                     "style-loader" , "css-loader"
                    ]
            },
            {
                test: /\.scss$/,
                use: cssConfig
            },
            {
                test: /\.pug$/,
                use: ['html-loader', 'pug-html-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: ['file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/',
                        'image-webpack-loader'
                     ]
            },
            {
                test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader?name=[name].[ext]&outputPath=fonts/&publicPath=fonts/'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            title: '',
            template: './src/index.html',
            minify: {
                collapseWhitespace: true
            },
            hash: true,
            inject: true
       }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new ExtractTextPlugin({
            filename: 'app.css',
            disable: !isProd,
            allChunks: true
        }),
        new webpack.DefinePlugin({

            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)

        })
    ]

};

Here is the package.json scripts:

"scripts": {
    "killallProcesses": "killall node && webpack-dev-server",
    "start": "webpack-dev-server",
    "dev": "webpack -d",
    "prod": "npm run clean && NODE_ENV=production webpack -p",
    "clean": "rimraf ./dist/* ",
    "deploy-gh": "npm run prod && git subtree push --prefix dist origin gh-pages"
  }

So, not sure what is wrong here but compile time is very slow - using greensock as vendor but nothing else.. So not sure why its so slow. Even when I start webpack its brutal slow.

Answer 1

Webpack version 4 came with a huge speed imporvements.

First, use this strategy to split your config files for production and for development. Just follow the idea, don't follow the configurations because some of them are outdated.

Your config is the new config schema, based on webpack 4, só i'm going to do some tweaks to the basic one, and you can split them using the strategy i've linked.

First: install mini-css-extract-plugin.

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProd = process.env.NODE_ENV === 'production';
const cssDev = ['style-loader', 'css-loader', 'sass-loader'];

const cssProd = [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'];

const cssConfig = isProd ? cssProd : cssDev;

// content hash is better for production which helps increasing cache.
// contenthash is the hash generated given the content of the file, so this is going to change only if the content changed.
const outputFilename = isProd ? '[name].[contenthash].js' : 'name.[hash].js';

module.exports = {
    entry: './src/js/index.js',

        output: {
            // dist folder is by default the output folder
      filename: outputFilename
        },

        // this should go into the webpack.dev.js
    devServer: {
        //contentBase: path.join(__dirname, "/dist"),
        compress: true,
        port: 3000,
        hot: true,
        stats: "errors-only",
        open: true
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                            commons: {
                                    // this takes care of all the vendors in your files
                                    // no need to add as an entrypoint.
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    },
    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use:[MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/,
                use: cssConfig
            },
            {
                test: /\.pug$/,
                use: ['html-loader', 'pug-html-loader']
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: ['file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/',
                        'image-webpack-loader'
                     ]
            },
            {
                test: /\.(eot|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                use: 'file-loader?name=[name].[ext]&outputPath=fonts/&publicPath=fonts/'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            title: '',
            template: './src/index.html',
            minify: {
                collapseWhitespace: true
            },
            hash: true,
            inject: true
       }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new MiniCssExtractPlugin({
            filename: 'app.css',
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        })
    ]

};

Try this one and let me know what you got.