webpack 中的Loader的学习与总结

た入场券 2022-10-01 06:59 179阅读 0赞

**故事：在学习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