通过前面章节的内容，对于 Webpack 的基础知识应该有了一个总体的了解。下面将以一个具体的实例来写一个 Webpack 的 Loader。这个 Loader 本身复用性并不高，它是我在开发中遇到的一个实际问题。通过这个例子的论述，对于如何写一个 Webpack 的 Loader 应该会有一个整体的把握。
写一个 Webpack 的 Loader
假如 Markdown 文件的主要内容如下（完整内容查看这里）：
import { Button } from 'antd';
ReactDOM.render(
<div>
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="danger">Danger</Button>
</div>
, mountNode);
此时，希望使用 Webpack 的 Loader 来加载这个 Markdown 文件的内容。那么很显然，我们就是要写一个相应的 Loader，比如在 webpack.config.js 中添加如下的配置：
module.exports = {
module:{
rule:[
{
test: /\.md$/,
loaders: [
require.resolve("babel-loader"),
require.resolve("./markdownDemoLoader.js")
]
}]
}
}
其中 markdownDemoLoader.js 就是我们需要完成的 Webpack 的 Loader。在这个 Loader 中有如下的代码：
const loaderUtils = require('loader-utils');
const Grob = require('grob-files');
const {p2jsonml} = require('./utils/pc2jsonml');
const transformer = require('./utils/transformer');
const Smangle = require('string-mangle');
const generator = require('babel-generator').default;
const pwd = process.cwd();
const fs = require('fs');
const path = require('path');
const util = require('util');
/**
*第一个参数是 Markdown 的内容
*/
module.exports = function markdown2htmlPreview (content){
//缓存该模块
if (this.cacheable) {
this.cacheable();
}
const loaderIndex = this.loaderIndex;
//打印 this 可以得到所有的信息，这里得到 MD 处理文件的 loader 数组中，当前 loader 所在的下标
const query = loaderUtils.getOptions(this);
const lang = query&&query.lang || 'react-demo';
//获取 Loader 的 query 字段
const processedjsonml=Smangle.stringify(p2jsonml(content));
//得到 jsonml
const astProcessed = `module.exports = ${processedjsonml}`;
//每一个 Loader 导出的内容都是 module.exports
const res = transformer(astProcessed,lang);
//将得到的 jsonml 内容进一步的处理
const inputAst = res.inputAst;
const imports = res.imports;
for (let k = 0; k < imports.length; k++) {
inputAst.program.body.unshift(imports[k]);
const code = generator(inputAst, null, content).code;
//回到 ES6 代码
const processedCode= 'const React = require(\'react\');\n' +
'const ReactDOM = require(\'react-dom\');\n'+
code;
return processedCode;
}
}
现在看看 Loader 编写中常用的方法：
if (this.cacheable) {
this.cacheable();
}
我们知道 Loader 加载的结果默认是缓存的，如果不想缓存可以使用 this.cacheable(false); 去阻止缓存。一个可以缓存的 Loader 必须满足一定的条件，即当输入和模块依赖关系没有发生变化的情况下，输出默认是确定的。也就是说，这个模块除了通过 this.addDependency 添加的模块依赖以外没有任何其他的模块依赖。
const loaderIndex = this.loaderIndex;
这个表示当前 Loader 在加载特定文件的时候所在的下标。
在上面这个 Loader 中，首先原样传入 Markdown 文件的内容，然后将它转化为 jsonml，来看看上面的 jsonml.js 的内容：
const markTwain = require('mark-twain');
const path = require('path');
function p2jsonml(fileContent){
const markdown = markTwain(fileContent);
return markdown;
};
module.exports = {
p2jsonml
}
转化为 jsonml 格式以后，将会得到如下的内容：
module.exports = { "content": [ "article", [ "h3", "1.mark-twain 解析出来的无法解析成为 ast" ], [ "pre", { "lang": "jsx" }, [ "code", "import { Button } from 'antd';\nReactDOM.render(\n
\n <Button type="primary" shape="circle" icon="search" />\n <Button type="primary" icon="search">Search\n <Button shape="circle" icon="search" />\n <Button icon="search">Search\n
\n <Button type="ghost" shape="circle" icon="search" />\n <Button type="ghost" icon="search">Search\n <Button type="dashed" shape="circle" icon="search" />\n <Button type="dashed" icon="search">Search\n
,\n mountNode\n);" ] ] ], "meta": {
} }
但是这并不是希望的结果，我们需要继续如下的处理，其中目的只有一个：将 ReactDOM.render 中第一个参数的值放到一个独立的函数中，函数的名字为 jsonmlReactLoader：
const babylon = require('babylon');
const types = require('babel-types');
const traverse = require('babel-traverse').default;
function parser(content) {
return babylon.parse(content, {
sourceType: 'module',
plugins: [
'jsx',
'flow',
'asyncFunctions',
'classConstructorCall',
'doExpressions',
'trailingFunctionCommas',
'objectRestSpread',
'decorators',
'classProperties',
'exportExtensions',
'exponentiationOperator',
'asyncGenerators',
'functionBind',
'functionSent',
],
});
}
module.exports = function transformer(content, lang) {
let imports = [];
const inputAst = parser(content);
traverse(inputAst, {
ArrayExpression: function(path) {
const node = path.node;
const firstItem = node.elements[0];
//tagName
const secondItem = node.elements[1];
//attributes or child element
let renderReturn;
if (firstItem &&
firstItem.type === 'StringLiteral' &&
firstItem.value === 'pre' &&
secondItem.properties[0].value.value === lang) {
let codeNode = node.elements[2].elements[1];
let code = codeNode.value;
//得到代码的内容了，也就是 demo 的代码内容
const codeAst = parser(code);
//继续解析代码内容~~~
traverse(codeAst, {
ImportDeclaration: function(importPath) {
imports.push(importPath.node);
importPath.remove();
},
CallExpression: function(CallPath) {
const CallPathNode = CallPath.node;
if (CallPathNode.callee &&
CallPathNode.callee.object &&
CallPathNode.callee.object.name === 'ReactDOM' &&
CallPathNode.callee.property &&
CallPathNode.callee.property.name === 'render') {
//we focus on ReactDOM.render method
renderReturn = types.returnStatement(
CallPathNode.arguments[0]
);
//we focus on first parameter of ReactDOM.render method
CallPath.remove();
}
},
});
const astProgramBody = codeAst.program.body;
const codeBlock = types.BlockStatement(astProgramBody);
if (renderReturn) {
astProgramBody.push(renderReturn);
}
const coceFunction = types.functionExpression(
types.Identifier('jsonmlReactLoader'),
[],
);
path.replaceWith(coceFunction);
}
},
});
return {
imports: imports,
inputAst: inputAst,
};
};
经过上面的代码处理，可以清楚的看到 Markdown 文件内容变成了如下的格式了：
const React = require('react');
const ReactDOM = require('react-dom');
import { Button } from 'antd';
module.exports = {
"content": ["article", ["h3", "1.mark-twain解析出来的无法解析成为ast"], function jsonmlReactLoader() {
return <div>
<Button type="primary" shape="circle" icon="search" />
<Button type="primary" icon="search">Search</Button>
<Button shape="circle" icon="search" />
<Button icon="search">Search</Button>
<br />
<Button type="ghost" shape="circle" icon="search" />
<Button type="ghost" icon="search">Search</Button>
<Button type="dashed" shape="circle" icon="search" />
<Button type="dashed" icon="search">Search</Button>
</div>;
}],
"meta": {}
};
此时的模块依然是 ES6 格式与 jsx 混合的代码，我们需要进一步配合 babel 来处理将它转化为 ES5 代码，所以 webpack.config.js 中才会在该插件后引入 babel-loader 来对代码进行进一步的打包。那么你可能会想，就算 babel 打包后，得到上面这样的代码会有什么用？来看看，在前端是如何将这样的代码转化为 React 类型的：
import ReactDOM from "react-dom";
import React from "react";
const content = require('../../demos/basic.md');
const converters = [
[
function(node) { return typeof node === 'function'; },
function(node, index) {
return React.cloneElement(node(), { key: index });
}
]
];
//(2)converters 可以引入一个库来完成
const JsonML = require('jsonml.js/lib/utils');
const toReactComponent = require('jsonml-to-react-component');
ReactDOM.render(toReactComponent(content.content,converters), document.getElementById('react-content'));
是不是很容易理解了，Loader 处理后的代码，最后会被原样转化为 React 的组件并在页面中展示，当然这个过程必须经过 jsonml-to-react-element 的转化。所以说，Loader 完成了 Markdown 文件类型到我们最后的 JavaScript 模块的转化。这就是 Webpack 中 Loader 的强大作用。
