自定义loader基础知识 译文 编写一个loader

参考 ：译文 编写一个loader

https://webpack.github.io/docs/loaders.html

按照loader的返回值可以分为两种：

• 最左loader：这种loader会返回字符串描述的js模块代码，已经是loader的最终处理结果了，这样的字符串会被添加到webpack的模块函数中
• 非最左loader：返回值不是js模块代码，而仅仅是对资源的中间处理结果，这样的字符串需要被后续的loader处理

一般情况下，在loader的链式调用中，一般是这样：最左loader！非最左loader！非最左loader ....

简单loader例子

// loaders/myLoader.js 返回的值是js模块代码，这个loader属于最左loader
module.exports = function loader(source) {
    return `module.exports = {fn: ${source}}`;
};

// main.js
const src = require("./src")
src.fn();

// src.js
alert(999)

//配置文件
const path = require('path')
module.exports = {
    entry:  [__dirname + "/main.js"],
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js",
    },
    module: {
        loaders:[
            {
                test: /src.js/,
                use: [
                    {
                        loader: path.resolve(__dirname, './loaders/myLoader.js'),
                    }
                ]
            }
        ]
    }
}

打包后的结果

/***/ }),
/**/
/***/ (function(module, exports, __webpack_require__) {

const src = __webpack_require__(2)
src.fn();

/***/ }),
/**/
/***/ (function(module, exports) {

module.exports = {fn: alert(999)}

/***/ })
/******/ ]);

注意：如果loader处理的是所有js，则入口文件是js的话也会被处理

aync loader

把以上小例子中的loader定义为：

module.exports = function(source) {
    var callback = this.async();
    setTimeout(function(){
       callback(null,`module.exports = {fn: ${source}}`)
    },5000);
};

启动打包后，经过5s才打包完成。打包结果和以上小例子中的一致。

pitching loader

在loader函数对象上添加一个pitch属性，这个pitch所执行的函数称为pitching loader。在pitching loader中可以通过data把数据传递给对应的loader，而不能传递给其他loader。

在链式调用中，pitching loader 与 loader的执行次序（以 a!b!c!resource 为例）：

• pitcha
  • pitchb
    • pitchc
      • read fileresource(addsresourceto dependencies)
    • runc
  • runb
• runa

在pitching loader有返回值时的情况

• pitcha
  • pitchb(returns something)
• runa

可见，哪个pitching loader有返回值，则对应的loader以及后续的loader都不执行了。以上例子中a loader函数的第一个参数就是b pitching loader的返回值。