对于一个样式文件（以less为例），最常见的loader配置为：

{
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
}

接下来我们分别去实现less-loader、css-loader、style-loader

less-loader

Less是CSS预处理语言，相比于CSS，增加了变量、函数等特性，其中Less-loader的作用就是把Less代码转译为浏览器可以识别的CSS代码。

less-loader的原理很简单，就是调用less库提供的方法，转译less语法后输出，如下：

    const less = require("less");
    module.exports = function(content){
        const callback = this.async();//转译相对来说比较耗时，采用异步loader
        const options = this.getOptions();//读取options
        less.render(
            content,
            createOptions(options);
            (err,output) => {
                callback(err,content.css);//将生成的css代码传递给下一个loader
            }
        )
    }