webpack自定义loader全面详解

什么是loader

在webpack的构建过程中，通过loader可以对文件进行转换处理。loader可以将文件从不同的语言（例如：TypeScript）转换为JavaScript，或将内联图像转换为data URL。webpack本身只能理解JavaScript和JSON文件，而loader能够让webpack处理其他类型的文件，并将其转换为有效的模块。

创建自定义loader

步骤

1. 创建一个npm包文件夹，例如：my-loader。
2. 在my-loader文件夹中创建一个index.js文件。
3. 在index.js中编写loader函数。
4. 在my-loader文件夹中创建一个package.json文件，并完成包信息的填写。
5. 将my-loader发布到npm上。
6. 在webpack.config.js中使用自定义loader。

代码示例

下面是一个简单的示例，该示例将在JavaScript文件中的字符串（需要使用单引号）中插入“Hello World！”。

1. 创建一个my-loader文件夹。

2. 在my-loader文件夹中创建一个index.js文件。

javascript
module.exports = function(source) {
return source.replace(/'([^']*)'/g, "'$1, Hello World!'");
};

上面的代码中，使用replace方法匹配所有单引号内的字符串，并在字符串尾部插入“，Hello World！”。

1. 在my-loader文件夹中创建一个package.json文件，并完成包信息的填写。

json
{
"name": "my-loader",
"version": "1.0.0",
"description": "My custom loader",
"main": "index.js",
"author": "",
"license": "ISC",
"keywords": [
"webpack",
"loader"
]
}

1. 将my-loader发布到npm上。

bash
npm login # 登录npm账号
npm publish # 发布my-loader到npm上

1. 在webpack.config.js中使用自定义loader。

javascript
module.exports = {
module: {
rules: [
{
test: /\.js$/, // 匹配处理文件的类型
use: ['my-loader'], // 使用自定义loader
},
],
},
};

1. 配置完成后，可以通过打包出来的代码查看效果。

```javascript
function hello() {
console.log('hello');
const str = 'hello, world!';
console.log(str);
}

hello();
```

输出：

```javascript
function hello() {
console.log('hello');
const str = 'hello, world!, Hello World!';
console.log(str);
}

hello();
```

loader的执行顺序

在webpack中，定义多个loader时，webpack会按照从右往左的顺序执行它们。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配处理文件的类型
        use: ['my-loader1', 'my-loader2'], // 先执行my-loader1，再执行my-loader2
      },
    ],
  },
};

loader的参数

loader可以接受参数，并且可以通过options属性来传递这些参数。例如：

module.exports = function(source) {
  const str = "Hello World";
  const options = this.query;
  return source.replace(/'([^']*)'/g, `'${options.prefix}$1${options.suffix}'`);
};

在使用loader时，可以这样传递参数：

use: [
  {
    loader: 'my-loader',
    options: {
      prefix: ': ',
      suffix: ' :',
    },
  },
],

loader处理文件流

loader处理的是源文件的字符串，但我们也可以通过loader-runner模块中的pitching和normal函数来处理文件流。

pitching函数

pitching函数是在loader自身执行之前执行的函数，用于拦截其他loader的请求。函数返回值可以是字符串、undefined、null或者stopIteration对象。

normal函数

normal函数是我们通常写的loader函数。它接收到的参数是pitching函数的返回值，也就是它前面的所有loader处理结果。它的返回值需要是JavaScript代码字符串。

代码示例

下面的示例演示了如何使用loader-runner模块处理文件流。这个loader可以移除JavaScript文件中的console.log语句。

1. 安装loader-runner模块。

bash
npm install loader-runner --save-dev

1. 创建一个console-remover-loader.js文件。

```javascript
const { getOptions } = require('loader-utils');
const { pitch } = require('loader-runner');

module.exports = function(source) {
return source.replace(/console.log(.*);?/g, '');
};

module.exports.pitch = function(remainingRequest, precedingRequest, data) {
console.log(console-remover-loader pitching: ${precedingRequest});

 data.source = '';
 return `require(${JSON.stringify('!!' + remainingRequest)});`;

};
```

上面的代码中，使用replace方法匹配所有console.log语句并移除。同时，我们也定义了一个pitching函数，用于拦截其他loader的请求，并清空data.source。

1. 创建一个console-remover-runner.js文件。

```javascript
const path = require('path');
const { runLoaders } = require('loader-runner');

const request = path.resolve(__dirname, './example.js');
const loaders = [
{
loader: path.resolve(__dirname, './console-remover-loader.js'),
options: {},
},
];

runLoaders(
{
// 编写一个简单的模块
resource: request,
loaders: loaders,
},
function(err, result) {
if (err) {
console.log(err);
return;
}

   console.log(result.result[0]);
 },

);
```

上面的代码中，我们定义了一个request参数来指明需要处理的文件，使用runLoaders函数来执行loader，然后打印出处理结果。

1. 在命令行中运行console-remover-runner.js文件，即可输出处理结果。

bash
node console-remover-runner.js

以上就是自定义loader的完整攻略了。