如何写一个 loader?

这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。

什么是 loader?

loader 用于对模块的源代码进行转换. webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

如何去实现一个简单的 loader

1.创建一个简单的 JS 代码目录

根目录 src ,下面有 hello.js 和 index.js , index.js作为入口文件。

hello.js:

export function sayHello(name) {
  return `hello, ${name}`
}

仅仅提供一个简单的方法，将入参前面加上 hello 并将结果返回

index.js:

import { sayHello } from './hello'

const hello = sayHello('欧大')
console.log(hello)

调用 hello.js 下的 sayHello方法，传入参数，并且打印结果.

2. 使用 webpack 打包

执行命令:

$yarn init -y
$yarn add webpack webpack-cli
$npx webpack

执行结果:

在根目录下生成一个 dist文件夹，文件夹下是打包后的产物,main.js中的内容如图所示。

说明打包成功了。

这是一个没有使用任何 loader后打包的产物，下面尝试写一个 loader.

3. 简单实现一个 loader: 替换文本 loader

3.1 创建一个 loader js

loader 的本质还是export 出一个方法，入参为打包后的字符串，所以简单实现一个文本替换loader即可以对入参的字符串进行文本替换。

loader.js:

module.exports = function (source) {
  return source.replace('欧大', '欧浪浪')

}

3.2 配置webpack loader

创建 webpack.config.js:

module.exports = {
  entry: './src/index',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: './loader/myLoader.js',
      },
    ],
  }
}

执行打包看效果:

npx webpack

成功将代码中的字符串替换完成。实际上在实际开发中，loader 做的事情远比简单的替换要复杂得多。

例如

css-loader : css-loader 会对 @import 和 url() 进行处理

url-loader: url-loade 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

babel-loader: bable-loader此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件。

异步loader

在一些复杂的场景中可能同步的计算和逻辑处理已经不能够满足我们的需求，官方也为 loader 提供了一个异步处理的解决方案。

编写一个异步loader：


module.exports = function (source) {
  const callback = this.async();
  setTimeout(() => {
    const res = source.replace('欧大', '欧浪浪')

    callback(null, res);
  }, 1000);

}

[每日一答]：能不能写一个webpack loader？