Webpack watch performance

[FlorianChauvel]

Hi, I'm using the current config :

Angular2 Webpack Typescript Less

In local dev mode (npm run serve), the watch task takes around 30sec. It seems to be caused by this part of the webpack config :

            {
                test: /\.(css|less)$/,
                loaders: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }

Effectively, 'less-loader' is applied to any css file which drastically impacts the performances. I managed to reduce the watch task to ~500ms by splitting the webpack loaders this way :

            {
                test: /\.(css)$/,
                loaders: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(less)$/,
                loaders: [
                    'style-loader',
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }

However, I don't know how to fix the generator itself. Hope someone more experienced could pick this up and provide a pull request.

[martinchristov]

+1 I'm having the same issue, but I use sass-loader instead. It's taking a similar amount of time to reload the style :( We really need a solution for this