webpack之loader執行順序及原理

less-loader、css-loader、style-loader插件作用

less-loader：用于加載.less檔案，将less轉化為css

css-loader：用于加載.css檔案，将css轉化為commonjs

style-loader: 将樣式通過<style>标簽插入到header中

先安裝這幾款插件

npm i style-loader css-loader less less-loader -D

在webpack.config.js檔案中加入如下配置

'use strict'
const path = require('path')
module.exports = {
  mode: 'production',
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}           

解析less主要是通過以上代碼中的以下部分

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

這裡有一點要注意，他們的解析過程是鍊式的，是以在use數組中下面的部分會先執行，是以他們的執行順序其實是less-loader > css-loader > style-loader

webpack的加載從右往左進行?

其實為啥是從右往左，而不從左往右，隻是Webpack選擇了compose方式，而不是pipe的方式而已，在技術上實作從左往右也不會有難度。

函數組合：函數組合是函數式程式設計中非常重要的思想。

函數組合的兩種形式：一種是pipe，另一種是compose。前者從左向右組合函數，後者方向相反。

在Uninx有pipeline的概念，平時應該也有接觸，比如 ps aux | grep node，這些都是從左往右的。

但是在函數式程式設計中有組合的概念，我們數學中常見的f(g(x))，在函數式程式設計一般的實作方式是從右往左，如

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x)
const add1 = n => n + 1 // 加1
const double = n => n * 2 // 乘2
const add1ThenDouble = compose(
  double,
  add1
)
add1ThenDouble(2) // 6
// ((2 + 1 = 3) * 2 = 6)           

這裡可以看到我們先執行的加1，然後執行的double，在compose中是采用reduceRight，是以我們傳入參數的順序程式設計了先傳入double，後傳入add1

那麼其實也可以實作從左往右

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const add1ThenDouble = pipe(
  add1,
  double
);
add1ThenDouble(2); // 6
// ((2 + 1 = 3) * 2 = 6)           

是以隻不過webpack選擇了函數式程式設計的方式，是以loader的順序程式設計了從右往左，如果webpack選擇了pipe的方式，那麼大家現在寫loader的時候的順序就變成從左往右了

compose : require("style-loader!css-loader!sass-loader!./my-styles.sass");
pipe : require("./my-styles.sass!sass-loader!css-loader!style-loader");