如何编写一个loader

webpack

 2019/09/28 

什么是loader

loader其实是一种打包方案，loader可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

自己编写的loader的使用

同普通loader一样，在webpack.config.js的module中写新的rule，还要在webpack.config.js新写一个配置项resolveLoader（代码如下所示），意思是按名称现在node_modules中找loader，找不到再去 ./loader 文件夹中找（自己写的loader放在该文件夹中，为replaceLoader.js）

resolveLoader: {
  modules: ['node_modules', './loaders']
},
module: {
  rules: [{
    test: /\.js$/,
    use: {
      loader: 'replaceLoader',
      options: {
        name: 'Jacleklm'
      }
    }
  }]
}

对loader传递数据

如上面的代码中，option即可用来传递参数，把想传递的参数写成option对象的属性。然后replaceLoader.js中用this.query.属性即可得到这个参数；也可以使用loader-util中的getOption方法来得到这个option对象。

loader的编写

在这里，我们假设入口文件index.js中的代码内容仅为console.log('hello world');，我们想编写一个loader对这个文件进行处理，实现把world改成Jacleklm。
loader其实是一个函数。在编写的时候，我们可以把loader放在一个单独的文件中，然后导出即可使用。注意在这里module.exports = function() { }的function不能写成箭头函数，因为在loader的编写中我们会常用到this，这里用箭头函数可能会造成this的使用出现麻烦。最终代码如下：

const loaderUtils = require('loader-utils')

module.exports = function (source) {
  const options = loaderUtils.getOptions(this)
  return source.replace('world', options.name)
}

原文作者：Jacleklm

原文链接：http://jacleklm.github.io/2019/09/28/%E5%A6%82%E4%BD%95%E7%BC%96%E5%86%99%E4%B8%80%E4%B8%AAloader/

发表日期：September 28th 2019, 2:27:21 pm

更新日期：September 17th 2023, 10:00:22 pm

Next Post

如何编写一个plugin
Previous Post

提升webpack打包速度的方法

CATALOG

1. 什么是loader
2. 自己编写的loader的使用
3. 对loader传递数据
4. loader的编写