原文地址
前言
最近由于用着 html-webpack-plugin 觉得很不爽,于是乎想自己动手写一个插件。原以为像 gulp 插件一样半天上手一天写完,但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。首先是进入 how to write a plugin 看了一页简单的介绍。然后教程会告诉你,你需要去了解 compiler 和 compilation 这两个对象,才能更好地写 webpack 的插件,然后作者给了 github 的链接给你,让你去看源代码,我晕。不过幸好最后给了一个 plugins 的 API 文档,才让我开发的过程中稍微有点头绪。
how to write a plugin 这个教程还是可以好好看看的,尤其是那个 simple example,它会教你在 compilation 的 emit 事件或之前,将你需要生成的文件放到 webpack 的 compilation.assets 里,这样就可以借助 webpack 的力量帮你生成文件,而不需要自己手动去写 fs.writeFileSync。
主要就是这段代码
1 2 3 4 5 6 7 8 |
compilation.assets['filelist.md'] = { source: function() { return filelist; }, size: function() { return filelist.length; } }; |
基本特性介绍
首先,定义一个函数 func,用户设置的 options 基本就在这里处理。
其次,需要设一个 func.prototype.apply 函数。这个函数是提供给 webpack 运行时调用的。webpack 会在这里注入 compiler 对象。
compiler 对象
输出 complier 对象,你会看到这一长串的内容(如下面代码),初步一看,我看出了两大类(有补充的可以告诉我)。一个 webpack 运行时的参数,例如_plugins,这些数组里的函数应该是 webpack 内置的函数,用于在 compiltion,this-compilation 和 should-emit 事件触发时调用的。另一个是用户写在 webpack.config.js 里的参数。隐约觉得这里好多未来都可能会是 webpack 暴露给用户的接口,使 webpack 的定制化功能更强大。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
Compiler { _plugins: { compilation: [ [Function], [Function], [Function], [Function] ], 'this-compilation': [ [Function: bound ] ], 'should-emit': [ [Function] ] }, outputPath: '', outputFileSystem: null, inputFileSystem: null, recordsInputPath: null, |