webpack之理解loader

我們在寫webpack配置文件的時候，應該有註意到經常用到loader這個配置項，那麼loader是用來做什麼的呢？
loader其實是用來將源文件經過轉化處理之後再輸出新文件。
如果是數組形式的話，它的執行順序是相反的，最後一個loader最早被調用，下一個loader傳入的是上一個loader的返回結果。

基礎的loader文件

首先在webpack.config.js里調用新建的loader文件

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: path.resolve('./loader/index.js'),
                    options: {}
                }
            }
        ]
    }
}

代碼在傳入loader文件的時候已經被轉為string了，loader文件最終也必須返回string數據。loader文件里代碼如下：

module.exports = function (content) {
    console.log('loader文件', content);
    return content;
}

獲取options配置數據

webpack.config.js文件里，在配置loader的同時，還可以配置options。

const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: path.resolve('./loader/index.js'),
                    options: {
                        data: ’自定義的配置'
                    }
                }
            }
        ]
    }
}

在loader文件裡面可以利用webpack提供的loader-utils來獲取options。

const loaderUtils = require('loader-utils');
module.exports = function (content) {
    // this是loader函數的執行上下文
    const options = loaderUtils.getOptions(this);
    console.log('配置文件', options); // {data:'自定義的配置'}
    return content;
}

非同步loader

之前舉的例子都是在同步的情況下，那麼在非同步的情況中，必須調用this.async()來告知loader等待非同步結果，它會返回this.callback()回調函數，這時候loader必須返回undefined

module.exports = function(content) {
  const callback = this.async();
  someAsyncOperation(content, function(err, result) {
    if (err) return callback(err);
    callback(null, result, map, meta);
  });
};

總結

開頭就提到過了，loader實質上是用來處理源文件的，在loader函數裡面一般都會對代碼進行轉化處理，這裡就會用到AST，將代碼轉換為AST方便對代碼進行處理。