Separate LESS Packaging & Compilation by Webpack

Summary:  Use webpack for separate compilation of LESS files to generate CSS.
How to implement separate packaging
Recently, we are also using webpack for our projects. I searched on the internet about how to configure webpack, and finally selected one. I must say that it really helps! But after packaging, I found that webpack will package CSS together to the final js file, yielding a bulky js file, so I considered removing the third-party library first. This step is simple - we only need to configure the externals.
config.externals = {
     'angular':'angular',
     'bootstrap':'bootstrap'
 };

After the third-party library was removed, I found it is still a bit large, so I again considered to extract the CSS file to generate a separate CSS file - after all the CSS file will not affect page loading, but it may be a different case if it is put in js.
But how can we have CSS packaged separately? It is actually simple as well - we only need to install an extract-text-webpack-plugin.
var ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].[hash].css');

Introduce this plugin, and configure the loader.
loaders: [{
  test: /\.css$/,
  loader: isTest ? 'null' : extractCSS.extract('style','css')
}]

Finally register in the plug-in.

config.plugins.push(
  extractCSS
)

It is done, and all the CSS files to be imported in js will finally be packaged into a separate CSS file. Great!
How to implement LESS packaging
With the rise of precompiled languages, the front-end development relies increasingly on LESS, Sass, styles, etc. I think the use of LESS in our projects to develop the styles may cut down much development workload, but I'd like to introduce only one CSS file in the page. This requires us to compile LESS into a CSS file. Combining with the above step, how can we implement this function?
I drew some reference from the examples given in the extract-text-webpack-plugin document.
let ExtractTextPlugin = require('extract-text-webpack-plugin'); // multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
  ...
  module: {
    loaders: [
      {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
      {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
      ...
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

Then I found that LESS was packaged indeed, but only into a LESS file. This is of course not what I want. It seems that the loader must be modified.
loaders : [{
    test : /\.(less|css)$/,
    loader: ExtractTextPlugin.extract('style', 'css!less')
}]

There should be no problem after the loader is modified. But...
ERROR in Cannot find module 'less'

How can the result be like this? The configuration code looks correct, and the LESS-loader is also installed. How depressing! I finally got the answer after searching on the internet for a long time: It is not enough to merely install the LESS-loader, but LESS should also be installed. The compilation of LESS into CSS should probably be implemented by the LESS module.
cnpm install less --save-dev

Run it. Perfect!
I have been using webpack for some time, and it has never ceased to amaze me. Maybe there are other functions that I have not yet discovered. Hope such conscientious tools keep getting better.