标签：准备 版本 自身 函数 访问 重要 ade 生成 r.js
Webpack插件为第三方开发者释放了Webpack的最大可能性。利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来。Build插件比Build loader 更进一步。因为你需要理解Webpack底层的东西。要有月底源代码的准备。
开发插件最重要的两个资源就是 compiler 和 compilation 对象，理解他们的是扩展Webpack重要的一步
这两个组件在所有的Webpack插件中都是不可分割的一部分（特别是compilation），所以对于开发者来说熟悉这两个组件的源文件将是你受益很多：
Plugins是可以用自身原型方法apply来实例化的对象。apply只在安装插件被Webpack compiler执行一次。apply方法传入一个Webpck compiler的引用，来访问编译器回调。
一个简单的插件结构：
1 function HelloWorldPlugin(options) { 2 // Setup the plugin instance with options... 3 } 4 5 HelloWorldPlugin.prototype.apply = function(compiler) { 6 compiler.plugin(‘done‘, function() { 7 console.log(‘Hello World!‘); 8 }); 9 }; 10 11 module.exports = HelloWorldPlugin;
安装插件时, 只需要将它的一个实例放到 Webpack config plugins 数组里面:
1 var HelloWorldPlugin = require(‘hello-world‘); 2 3 var webpackConfig = { 4 // ... config settings here ... 5 plugins: [ 6 new HelloWorldPlugin({options: true}) 7 ] 8 };
使用compiler对象，你可能需要绑定带有各个新compilation的引用的回调函数。这些compilation提供回调函数连接成许多构建过程中的步骤。
1 function HelloCompilationPlugin(options) {} 2 3 HelloCompilationPlugin.prototype.apply = function(compiler) { 4 5 // Setup callback for accessing a compilation: 6 compiler.plugin("compilation", function(compilation) { 7 8 // Now setup callbacks for accessing compilation steps: 9 compilation.plugin("optimize", function() { 10 console.log("Assets are being optimized."); 11 }); 12 }); 13 }); 14 15 module.exports = HelloCompilationPlugin;
更多关于在compiler, compilation等对象中哪些回调有用，看一下
plugins API
有些compilation插件的步骤时异步的，并且会传入一个当你的插件运行完成时候必须调用的回调函数。
1 function HelloAsyncPlugin(options) {} 2 3 HelloAsyncPlugin.prototype.apply = function(compiler) { 4 compiler.plugin("emit", function(compilation, callback) { 5 6 // Do something async... 7 setTimeout(function() { 8 console.log("Done with async work..."); 9 callback(); 10 }, 1000); 11 12 }); 13 }); 14 15 module.exports = HelloAsyncPlugin;
我们了解了Webpack compiler和各个compilations，我们就可以用它们来创造无尽的可能。我们可以重定当前文件的格式，生成一个衍生文件，或者制造出一个全新的assets
下面我们将写一个简单的插件，生成一个filelist.md文件，里面的内容是，列出我们build的所有asset 文件。
1 function FileListPlugin(options) {} 2 3 FileListPlugin.prototype.apply = function(compiler) { 4 compiler.plugin(‘emit‘, function(compilation, callback) { 5 // Create a header string for the generated file: 6 var filelist = ‘In this build:\n\n‘; 7 8 // Loop through all compiled assets, 9 // adding a new line item for each filename. 10 for (var filename in compilation.assets) { 11 filelist += (‘- ‘+ filename +‘\n‘); 12 } 13 14 // Insert this list into the Webpack build as a new file asset: 15 compilation.assets[‘filelist.md‘] = { 16 source: function() { 17 return filelist; 18 }, 19 size: function() { 20 return filelist.length; 21 } 22 }; 23 24 callback(); 25 }); 26 }; 27 28 module.exports = FileListPlugin;
标签：准备 版本 自身 函数 访问 重要 ade 生成 r.js
原文地址：https://www.cnblogs.com/cangqinglang/p/9059739.html
