IT序号网

编写webpack 插件知识解答

wyy 2021年05月25日 程序员 156 0

Webpack插件为第三方开发者释放了Webpack的最大可能性。利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来。Build插件比Build loader 更进一步。因为你需要理解Webpack底层的东西。要有月底源代码的准备。

Compiler 和 Compilation

开发插件最重要的两个资源就是 compiler 和 compilation 对象,理解他们的是扩展Webpack重要的一步

  • compiler对象包涵了Webpack环境所有的的配置信息,这个对象在Webpack启动时候被构建,并配置上所有的设置选项包括 options,loaders,plugins。当启用一个插件到Webpack环境的时候,这个插件就会接受一个指向compiler的参数。运用这个参数来获取到Webpack环境
  • compilation代表了一个单一构建版本的物料。在webpack中间件运行时,每当一个文件发生改变时就会产生一个新的compilation从而产生一个新的变异后的物料集合。compilation列出了很多关于当前模块资源的信息,编译后的资源信息,改动过的文件,以及监听过的依赖。compilation也提供了插件需要自定义功能的回调点。

这两个组件在所有的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 };

访问 compilation

使用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;


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Source Map入门教程知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。