Caching Webpack v4 css-loader CSS Modules with LESS

webpack.config.js

module: {
  rules: [
    {
      test: /\.less$/,
      use: [
        ...(process.env.NODE_ENV === 'production'
          ? [
              {
                loader: MiniCssExtractPlugin.loader,
              },
            ]
          : [
              {
                loader: 'style-loader',
              },
              {
                loader: 'cache-loader',
              },
            ]),
        {
          loader: 'css-loader',
          options: {
            minimize: process.env.NODE_ENV === 'production',
            modules: true,
            localIdentName: '[path][name]_[local]-[hash:base64:5]',
            camelCase: true,
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [autoprefixer],
          },
        },
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            paths: [paths.appSrc, paths.appNodeModules],
            modifyVars: {
              'primary-color': '#9771EC',
              'error-color': '#FC7272',
            }
          },
        },
      ],
    },
  ]
} 

webpack-dev-server recompiles were really slow (10 seconds) because editing a single .tsx file caused all of the other .ts and .tsx files to recompile, which means any of them that require a .less file will trigger those files to recompile, which means webpack was constantly recompiling all the .less even if nothing .less related changed.

Adding cache-loader after css-loader brought recompiles down to 1.5 to 3 seconds.

Note, it seems to be important to have cache-loader right after css-loader, otherwise I didn't see a difference in recompile times.

This took 1.5 days to figure out and improve. 😭 😭 😭