如何创建一个Webpack的loader

概述

Webpack中的loader用于对特定的文件进行预处理，在一个前端工程中，处理的文件不会只有JavaScript文件，还有CSS，JSON等其他文件，这时为了能在JavaScript中引入这些文件，就需要使用相关的loader对这些资源进行预处理。loader的使用并不难，只需要安装之后在配置文件中配置好即可，但为了更深入地了解loader是如何工作的，最好的方式就是自己动手写一个简单的loader。

loader的基本用法

安装loader，假设想要在工程中引入css文件，并以style标签的形式插入到页面中去。

1	yarn add --dev css-loader style-loader

安装完成之后在webpack.config.js文件中配置。

// webpack.config.js文件
module.exports = {
  // ...
  resolve: {
    extenstions: ['.js', '.json', '.css']
  },
  module: {
    loaders: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  }
  // ...
};

loader的作用其实很简单，对于指定的相关类型的文件，以字符串的形式交给loader进行处理，处理完成之后以字符串的形式返回，交给webpack处理，webpack会将返回的字符串当做JavaScript代码执行（因此，返回的字符串一般都是可执行的JavaScript代码）。

如果有多个loader（像上面这样），则会以配置顺序的从后向前的顺序执行，如上例中，先执行css-loader，返回的结果再交给style-loader执行。

如何创建一个loader

关于常见loader的配置和使用，相信读者都很熟悉了，那如何自己亲手写一个loader呢？我们说了loader只是接收一些字符串，然后再返回字符串，仅此而已，所以实现一个简单的loader其实很简单。

module.exports = function(src) {
  console.log(`hello： ${src}`);
  return src;
};

以上就是一个最简单的loader的实现，它不对输入做任何处理，只是原原本本的返回，当然中间输出了一句'hello ${src}'。

用法和普通地loader一样，假设这个loader用于处理txt文件，则可以这样配置。

module.exports = {
  // ...
  resolve: {
    extenstions: ['.js', '.json', '.css', '.txt']
  },
  module: {
    loaders: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }, {
      test: /.\txt$/, // 检测以.txt结尾的文件
      use: ['path/to/my-loader'] // 使用自定义的loader处理
    }]
  }
  // ...
};

当然，只是这样简单地在JavaScript中引入，还是会报错，因为引入JavaScript中的资源，必须也是JavaScript的形式。

loader中返回的字符串，应该是可执行的JavaScript代码，且符合CommonJS模块规范。

修改后的loader如下。

1
2
3

module.exports = function(src) {
  return `exports.content = ${src}`;
};

这时引入就和正常的JavaScript模块一样了。

// some module
const { content } = require('./path/to/your/file.txt');

// ...

总结

以上就是loader的全部内容，loader也可以写得很复杂，比如像css-loader会将css文件中的内容全部解析存在JavaScript对象中，style-loader会将css-loader导出的内容做进一步处理，最后导出能在页面中插入style标签的JavaScript代码。

概述

loader的基本用法

如何创建一个loader

总结

参考