【webpack进阶系列】写个 loader

[amandakelake]

一、loader是什么

概念 | webpack 中文网

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript/json）。

那么，loader跟我们熟知的plugin最大的区别是什么？

• loader: 对非JS文件进行转换，非JS被转换为commonJS规范的文件后，webpack才能解析到
• plugin: 在webpack打包编译过程里，在对应的事件节点里执行自定义操作，比如资源管理、文件优化、环境注入等操作

二、最简单的loader

在撸小demo之前，我们先看看怎样本地开发测试一个loader

Webpack 是运行在 Node.js 之上的，一个 Loader 其实就是一个 Node.js 模块，这个模块需要导出一个函数

一个最简单的loader源码如下

module.exports = function(source) {
	// source 是 compiler 传递给 Loader 的一个文件的原内容
	// 在这里对source做任何你想要的处理，然后返回
	return source;
};

三、实现一个loader转换*.lgc文件

首先，确认我们想要转换*.lgc格式的文件

// lgc.lgc文件
// 这里先用JS语法来写，如果像vue/react那样使用了不同的语法，那么就需要自己处理定义的语法
module.exports = {
    file: 'lgc'
}

在index.js里引用该文件

// 入口文件index.js
import content from './utils/lgc.lgc';
console.log('content', content);

如何能让这里识别lgc.lgc文件

webpack 配置三部曲

然后lgc-loader.js，其实也就是直接返回，并没有做什么特殊处理

module.exports = function (source) {
	console.log('run lgc-loader');
  // this.callback是官方提供的api
	this.callback(null, source);
	return;
};

然后把本地环境跑起来（相信webpack的基础使用配置不用贴了），可以看到已经有输出了

四、最重要的一步

经过上面的小demo，能够跑起来后，可以说已经入门了
那么接下来就重要的一步，就是读官方文档
编写一个 loader
loader API
一旦掌握了基本的调试入门，那么看官方文档就是不断实践api不断加深理解的这么一个很自然的过程，找再多的二手资料，等别人嚼碎了再喂自己，吸收的终究有限，靠主动吸收，最后掌握的才是自己的。