背景

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壓縮。