如何编写一个webpack loader

什么是loader

所谓 loader 只是一个导出为函数的 JavaScript 模块。这句话出自webpack的官方文档，那么现在我们可以知道其实loader就是一个函数，我们可以在这个函数里做一些事情。loader runner 会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。

// loaders/replace.js
module.exports = function (source) {
  return source.replace('oldName', this.query.name);
};

1、loader对外暴露的函数，切记不能使用箭头函数。因为在这个函数里，我们会用到this指向，webpack在调用loader的时候，会把this做一些变更。变更之后才能用this里的一些方法，如果写成箭头函数，这里的this指向就会有问题，所以这里的function一定是声明式的function
2、参数source为我们引入文件的源代码
3、在这里拿到代码之后，就可以把代码做一个变更，然后再返回出去
4、可以通过this.query取到传递的options内的一些参数

在webpack.config.js中做loader的使用配置

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js/,
      loader: path.join(__dirname, './loaders/replace.js'),
      options: {
        name: 'newName'// 传递给loader的参数
      }
    }]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

使用loader-utils分析参数：

// loader-utils模块需要单独使用npm下载安装
const loaderUtils = require('loader-utils');

module.exports = function (source) {
  // 使用loader-utils中的getOptions接收loader参数
  const options = loaderUtils.getOptions(this);
  return source.replace('oldName', options.name);
};

到这里，我们很轻松的就完成了一个自己的Loader。