webpack 中的Loader的学习与总结

故事：在学习webpack的时候一直想深入的去学习远离细节，因此在webpack中loader这个环节是不容忽视的,因此拾人牙慧学习一下

什么是loader

由于 Webpack 是运行在 Node.js 之上的，一个 Loader 其实就是一个 Node.js 模块，这个模块需要导出一个函数。 这个导出的函数的工作就是获得处理前的原内容，对原内容执行处理后，返回处理后的内容。

代码如下

module.exports = function(source) {
    // source 为 compiler 传递给 Loader 的一个文件的原内容
    // 该函数需要返回处理后的内容，这里简单起见，直接把原内容返回了，相当于该 Loader 没有做任何转换
    return source;
};复制代码

Loader 的调用

module.exports = {
    module: {
        rules: [
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    }
}
复制代码

通过上面的loader可以发现 css交给 css-loader处理，找出css中依赖的资源，对css进行压缩处理等，然后将处理完的css再交给style-loader处理，转换成通过脚本加载的js代码

执行顺序：链式执行，先 css-loader 再 style-loader

Loader 的职责

一个 Loader 的职责是单一的，只需要完成一种转换。 如果一个源文件需要经历多步转换才能正常使用，就通过多个 Loader 去转换。 在调用多个 Loader 去转换一个文件时，每个 Loader 会链式的顺序执行， 第一个 Loadwer 将会拿到需处理的原内容，上一个 Loader 处理后的结果会传给下一个接着处理，最后的 Loader 将处理后的最终结果返回给 Webpack。  
所以，在你开发一个 Loader 时，需严格遵循 职责的单一性，你只需关心输入和输出。

写一个最简单的loader

loaders/txt-loader.js

module.exports = function(source) {
    //src是原文件内容（abcde），下面对内容进行处理，这里是反转
    var result = source.split('').reverse().join('');//edcba
    //返回JavaScript源码，必须是String或者Buffer
    this.callback(null, `module.exports = '${result}'`);
    return;
}复制代码

这个loader功能是将.txt文件里面的内容反转

配置：

module.exports = {
    module: {
        rules: [
            {
                test:/\.txt$/,
                loader:['./loaders/txt-loader.js']
            }
        ]
    }
}复制代码

调用：

require('./txt/lihe.txt');复制代码

打包后输出

lihe.txt 原来的文本内容是 “2d2fgh999”，打包输出后为 '999hgf2d2'

转载于:https://juejin.im/post/5c9451065188252d6d2faf67