loader的开发

loader是一个函数，接收资源作为参数，返回资源

  1. // raw-loader
  2. const loaderUtils = require('loader-utils');
  3. module.exports = function (source) {
  4.   const json = JSON.stringify(source)
  5.   .replace(/\u2028/g, '\\u2028')
  6.   .replace(/\u2029/g, '\\u2029')
  7.   return `export default ${json}`;
  8. };

调试

开发loader时候可以使用loader-runner工具进行方便的开发和调试，它允许不安装webpack的情况下运行loader。

如果希望在要构建的项目中测试自己的loader，可以配置webpack的resolveLoader，指定loader的目录

  2. // webpack.config.js
  3. module.exports = {
  4.     // other config......
  5.     resolveLoader:{
  6.         modules: ['node_modules','loader']
  7.     }
  8. };

开发

1. 传参

可以通过loader-utils的getOptions方法获取参数。

  1. // raw-loader
  2. const loaderUtils = require('loader-utils');
  3. module.exports = function (source) {
  4.   const {name} = loaderUtils.getOptions(this);
  5.   console.log(name);
  6.   const json = JSON.stringify(source)
  7.   .replace(/\u2028/g, '\\u2028')
  8.   .replace(/\u2029/g, '\\u2029')
  9.   return `export default ${json}`;
  10. };

2. 异常处理

  1. throw new Error() 。
  2. this.callback（这个方法处理可以处理异常，也可以用来返回结果） 。
  1. this.callback(
  2.   err: Error | null,
  3.   content: String | Buffer,
  4.   sourceMap?: SourceMap,
  5.   meta?: any
  6.     );
  1. // raw-loader
  2. const loaderUtils = require('loader-utils');
  3. module.exports = function (source){
  4.   const {name} = loaderUtils.getOptions(this);
  5.   console.log(name);
  6.   const json = JSON.stringify(source)
  7.   .replace(/\u2028/g, '\\u2028')
  8.   .replace(/\u2029/g, '\\u2029')
  9.   this.callback(null, json)
  10. };

3. 异步处理

this.async()方法返回结果。

4. 在loader中使用缓存

webpack默认使用缓存，可以通过this.cacheable(false)关掉缓存。

缓存条件：loader在相同输入情况下有相同输出。

有依赖的的loader无法使用缓存。

5. 文件输出

this.emitFile进行文件输出

  1. const loaderUtils = require('loader-utils');
  2. module.exports = function (content) {
  3.   const url = loaderUtils.interpolateName(this, '[hash].ext', {content});
  4.   this.emitFile(url, content);
  5.   const path = `__webpack_public_path__${JSON.stringify(url)}`;
  6.   return `export default ${path}`;
  7. };

示例

开发一个table-loader

  1. // config.tbl
  2. component/attribute  color   disable
  3. dialog                red     true
  4. form                  blue    false
  1. // index.js
  2. import config, {name} from './config.tbl';
  3. console.log(name, config); // component/attribute {"dialog":{"color":"red","disable":"true"},"form":{"color":"blue","disable":"false"}}

loader代码

  1. module.exports = source => {
  2.   const table = {};
  3.   const [head, ...contentList] = source.split('\n');
  4.   const [tableName, ...columnList] = head.split(/\s+/g);
  5.   contentList.forEach(content => {
  6.     const [row, ...itemList] = content.split(/\s+/g);
  7.     table[row] = {};
  8.     itemList.forEach((item, index) => table[row][columnList[index]] = item);
  9.   });
  11.   return `export const name = '${tableName}';
  12.   export default ${JSON.stringify(table)};`;
  13. };

使用

  1. {
  2.     test: /\.tbl$/,
  3.     loader: 'table-loader'
  4. }

插件的开发

调试

插件没有想loader那样的独立运行环境（loader-runner），只能在webpack中运行，开发插件时候，可以使用webpack搭建最简单的环境来进行开发和调试。

开发

1. 插件的基本结构

  1. class MyPlugin {
  2.   apply(compiler) {
  3.     compiler.hooks.done.tap('My Plugin', stats => {
  4.       //
  5.     });
  6.   }
  7. }
  9. module.exports = MyPlugin;

2. 插件中的参数获取

在构造函数中获取。

  1. class MyPlugin {
  2.   constructor(options) {
  3.     this.options = options;
  4.   }
  5. }
  7. module.exports = MyPlugin;

3. 插件中的错误处理

参数校验阶段可以通过throw error方式抛出错误。

如果进入到hooks回调的执行环境中，则可以通过compilation对象的errors和warning收集。

  1. compilation.errors.push('file not exist');

4. 写入文件

通过compilation.emitAsset()方法实现文件写入。

https://webpack.docschina.org/api/compilation-object/#emitasset

示例

防止倒转依赖，配置依赖的顺序，插件会检测出后面的依赖前面的情况并报错，构建会失败。

例如

  1. ├── index.js
  2. └── lib
  3.     └── util.js

其中代码如下

  1. // index.js
  2. import util from './lib/util';
  3. console.log(util);
  4. export default 'index';
  1. // util.js
  2. import index from '../index';
  3. export default 'util';

构建结果：

<font style="color:#E8323C;">ERROR in dependency reverse. /Users/mac/demo/plugin/src/lib/util.js should not dependend on /Users/mac/demo/plugin/src/index.js</font>

插件实现：

  1. function ForbidReverseDependent(options) {
  2.   this.order = options.order;
  3. }
  4. ForbidReverseDependent.prototype.apply = function(compiler) {
  5.   var me = this;
  6.   function findIndex(modulePath) {
  7.     let index = -1;
  8.     let maxLen = 0;
  9.     me.order.forEach((item, i) => {
  10.       if (new RegExp(`^${item}`).test(modulePath) && item.length > maxLen) {
  11.         maxLen = item.length;
  12.         index = i;
  13.       }
  14.     });
  15.     return index;
  16.   }
  17.   compiler.hooks.compilation.tap('ForbidReverseDependent', compilation => {
  18.     compilation.hooks.optimizeModules.tap('ForbidReverseDependent', (modules) => {
  19.       for (let module of modules) {
  20.         const moduleResource = module.resource;
  21.         const moduleIndex = findIndex(moduleResource);
  22.         if (moduleIndex === -1) {
  23.           continue;
  24.         }
  25.         for (let dependency of module.dependencies) {
  26.           const depModule = compilation.moduleGraph.getModule(dependency);
  27.           if (!depModule || !depModule.resource) {
  28.             continue;
  29.           }
  30.           const depResource = depModule.resource;
  31.           const depIndex = findIndex(depResource);
  32.           if (depIndex !== -1) {
  33.             if (depIndex > moduleIndex) {
  34.               compilation.errors.push(`dependency reverse. ${moduleResource} should not dependend on ${depResource}`);
  35.             }
  36.           }
  37.         }
  38.       }
  39.     });
  40.   });
  41. }

参考文章

w-loader