前端构建工具Webpack之加载器（loader）

背景

Webpack将js、css之类的文件统一视为一个模块，而如css这样的模块，它是不可以直接加载的。

那么就需要专用的loader了，如：less-loader。使用起来是相当的方便，只需要在webpack的构建脚本中指定一个特殊的rules即可，上代码：

安装

这里同样使用npm方式安装，当然你可以用yarn或者其他的工具。

npm install less-loader --save-dev

配置

编写webpack.config.js文件：

rules: [
  {
    test: /\.less$/,
    use: ['style-loader', {
      loader: 'less-loader',
      options: {
        minimize: true
      },
    }],
  }
]

或者简写为：

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

再或者用更简单的方式：

require('style-loader!css-loader?minimize!./main.css')

这种方式需要在main.js源文件中指定，不过它只适用于较小的项目，而且只有少部分的文件。因为它也有不方便的地方，就是需要为每个单独的文件指定，项目规模一旦变大，这种写法就变成了恶梦。

问题

为什么有两个加载器呢？

先用css-loader读取样式文件，再由style-loader将其导入到js中。

其他

需要说明的是，这里的test是指定一个正则表达式，用以匹配对应的文件。而use则是针对该类型的文件使用特殊的loader（加载器）。

By the way，use内每个加载器都可以使用Url的QueryString参数形式设定对应的规则，如：css-loader?minimize，表示要开启css压缩。