为webpack编写一个loader

什么是loader

webpack官方对loader的描述：

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。
loader 甚至允许你直接在 JavaScript 模块中 import CSS文件

实际项目中经常用到的几个loader

url-loader : 可以将诸如图片的静态文件打包，对于小于某个值的图片，可以直接转为base64形式。
less-loader : 将less转为css
postcss-loader : 为css加上前缀如 -webkit -ms -moz ...

自己实现一个loader

一个简单的loader:

/* index.js */
console.log("loader");


/* /loader/test-loader.js */

// webpack官方推荐的工具包
const loaderUntils = require("loader-utils");

/* 
*  定义一个loader处理函数 比如这个loader是用来处理.js文件的, 
*  source就是js文件里的代码
*  处理完成后 ，必须将内容返回
*/
module.exports = function(source) { 
    // options 就是 webpack.config.js 里配置loader时定义的options
    const options = loaderUntils.getOptions(this);
    console.log(source, options)
    console.log(options);
   // 将代码里的hello 替换为hello world
    return source.replace("loader", "hello world")
};

webpack.config.js :

const path = require("path");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[hash].js"
    },
    module: {
        rules:[{
            test: /\.js$/,
            use: [
                {
                    loader: path.resolve(__dirname, "./loader/test-loader.js"),
                    options: {
                        name: "t1"
                    }
                }
            ],
        }]
    }
}

打包结果：

image.png

需要注意的是，不要使用箭头函数来定义loader, 否则this指向会有问题

这只是最简单的情况，实际上一些loader还会有异步处理或者返回多个值的情况，需要使用callback来完成。
示例：

/* 返回多个值的情况 */
module.exports = function(source) {
  const result = source.replace("loader", "hello world")
  this.callback(null, result);
};


/* 需要异步处理的情况 */
module.exports = function(source) {
 
//定义⼀一个异步处理理 返回的就是this.callback
const callback = this.async(); 
setTimeout(() => {
    const result = source.replace("loader", "hello world")
    callback(null, result)
  }, 3000)
}

编辑一个loader的步骤并不繁琐，难度取决于需要这个loader完成什么样的任务，另外设计上应该遵循单一职责的原则，复杂的操作可以由多个loader配合完成。

为webpack编写一个loader

什么是loader

自己实现一个loader

推荐阅读更多精彩内容