编写 webpack loader

loader是什么?

Loaders就是对一个模块源码的转换。它们可以在引入或加载文件时对文件进行预处理。因此loaders有点像其他构建工具中的tasks(任务),可以提供一种有力的方式去处理前端构建步骤。Loaders可以将一种不同类型的语言(比如TypeScript)转换为JavaScript,或者将内嵌图片转换为 data URLs。甚至可以在JavaScript模块中直接引入CSS文件。

编写loader

loader就是一个node模块,它输出了一个函数。当某种资源需要用这个loader转换时,这个函数会被调用。并且,这个函数可以通过提供给它的this上下文访问Loader API

编写loader

处理一个文件可以使用多个loader,loader的执行顺序是和本身的顺序是相反的,即最后一个loader最先执行,第一个loader最后执行
  1. 在项目根目录建一个loaders文件夹
  2. webpack中配置:ResolveLoader
module.exports = {
  resolveLoader:{
    // 去哪些目录下寻找 Loader,有先后顺序之分
    modules: ['node_modules','./loaders/'],
  }
}      
或者使用npm link
  1. 确保正在开发的本地 Npm 模块(也就是正在开发的 Loader)的 package.json 已经正确配置好;
  2. 在本地 Npm 模块根目录下执行 npm link,把本地模块注册到全局;
  3. 在项目根目录下执行 npm link loader-name,把第2步注册到全局的本地 Npm 模块链接到项目的 node_moduels 下,其中的 loader-name 是指在第1步中的 package.json 文件中配置的模块名称。

编写一个简单的loader,就叫reverse-txt-loader吧,功能就是对txt文件的内容反转。我们有个test.txt,内容为abcde。

module.exports = function(src) {
  //src是原文件内容(abcde),下面对内容进行处理,这里是反转
  var result = src.split('').reverse().join('');//edcba
  //返回JavaScript源码,必须是String或者Buffer
  this.callback(null, `module.exports = '${result}'`);
  return;
}
在webpack中是这样:
{
      test: /\.tsx?$/,
      use: {
          loader: '路径'
      }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。