Customize webpack loader 自定义 webpack loader

第一次写博客，觉得有用的将就着看吧

What is webpack loader?

webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript.
Plugin System，webpack features a rich plugin system. Most internal features are based on this plugin system
webpack 通常只能处理原生态的JS，但是loader能用于将其他资源转换为javascript。

webpack里几个重要概念

Entry：入口
Module：模块
Chunk：代码块
Loader：模块转换器，用于把模块原内容按照需求转换成新内容
Plugin：扩展插件
想学习参透webpack的运行工作机制，可以参考这篇文章，写的非常到位
https://mp.weixin.qq.com/s/IBcmdYCrKKoh9Zum22Tjig

编写loader的几个原则 Write a loader

1.单一职责
2.链式组合
3.模块化
4.无状态
（最好同步参考《代码整洁之道》）

最裸体的loader

module.exports = function(source) {
  // source 为 compiler 传递给 Loader 的一个文件的原内容 或 为串联loader中前一个loader的返回值
  // do some conversion
  // 该函数需要返回处理后的内容,若改loader为串联loader中的最后一个,需返回js代码
  return source;
};

第三方库

需要用到的工具，例如：

import loaderUitls from 'loader-utils';

export default function(source) {
  const options = loaderUitls.getOptions(this);
  return `export default ${ JSON.stringify(source) }`;
};

更多的结果和参数

返回其他结果的情况可以调用webpack的api接口callback()

export default function(source) {
  this.callback(error, source, sourceMaps, ast);
  return;
}

异步返回

export default function(source) {
  const callback = this.async();
  someAsyncOperate(source, () => {
    callback(error, source, sourceMaps, ast);
  })
  return;
}

如何操作源代码

项目中我们使用了Acorn

const { Parser } = require('acorn');

const astree = Parser.parse(source, {sourceType: 'module', ecmaVersion: '2015'})

sourceType ：这个配置项有两个值：module 和 script，默认是 script;主要是严格模式和 import/export 的区别
ecmaVersion
onComment ：传入一个回调函数，每当解析到代码中的注释时会触发,参数列表是：[block, text, start, end] ，block 是否是块注释，text 注释内容，start 和 end 是注释开始和结束的位置
（更多操作请查阅官方的文档，下一篇大致记录一下AST，并且在loader中如何利用AST抽象语法树使我们的loader更为健壮）