loader 编写一个android_如何编写一个简单的webpack loader

loader是一个翻译文件的node模块，可以把源文件转化后输出新结果到js模块中，下面来介绍一下如何编写一个自己的loader。

webpack loader的配置

首先，在webpack.config.js中配置我们要开发的loader，使用compose-loader处理.txt文件，如下：

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
    },
    module: {
        rules: [
            {
                test: /.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/,
            },
            // 自定义loader
            {
              test: /.txt$/,
              use: [
                './loader/compose-loader.js'
              ]
            }
        ]
    }

在开发loader过程中，为了方便本地编写测试loader，webpack提供了三种本地开发测试的方法，直接看官网，这里不再叙述。

这样就配置完成了。

编写Loader

/src/index.js

import txt from './txt/test.txt';

console.info(`这是txt文件内容:${txt}`)

这里要注意，我们要在入口文件导入这个文件，很多人会问：webpack不是配置了处理所有.txt文件么，为什么这里还要引入？

因为webpack会做筛选，如果没有引用该文件的话，是不会对文件进行编译处理的，同样也不会执行loader，后面在分析loader源码的文章中在做详细讲解。

编写完成入口文件后，开始后面最重点的loader文件。

/loader/compose-loader.js

module.exports = function (txt) {
    if (txt) {
        txt = txt.split('n').join(';');
        console.log('--- compose-loader output:', txt);
    }
 
    return txt;
}

在这里，我们把从txt文件中读取到的内容，去掉换行符，以分号隔开，并返回结果，如果是异步处理结果也可以使用this.callback方法来处理结果，详细loader-api使用文档见官网。

/src/txt/test.txt

商家测试账号22
买家测试账号71
店铺测试账号001
qn测试账号004

然后执行命令

webpack --config webpack.config.js

控制台输出转化后的结果，这样我们的loader就编写完了。

再来看下构建好的js文件

webpack把loader处理好的结果保存为js模块。

总结

loader本质就是接收字符串(或者buffer)，再返回处理完的字符串(或者buffer)的过程。

一个loader应该只做单一任务，这样可以每个 loader 都易维护。

需要loader处理的文件，需要在src下的文件中引用，否则webpack不会执行loader处理。

处理一个类文件时，如果使用多个loader，loader执行顺序是倒序的，所以要正确配置loader的顺序。