编写webpack 插件
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的引用,来访问编译器回调。
一个简单的插件结构:
function HelloWorldPlugin(options) {
// Setup the plugin instance with options...
} HelloWorldPlugin.prototype.apply = function(compiler) {
compiler.plugin('done', function() {
console.log('Hello World!');
});
}; module.exports = HelloWorldPlugin;
安装插件时, 只需要将它的一个实例放到 Webpack config plugins 数组里面:
var HelloWorldPlugin = require('hello-world'); var webpackConfig = {
// ... config settings here ...
plugins: [
new HelloWorldPlugin({options: true})
]
};
访问 compilation
使用compiler对象,你可能需要绑定带有各个新compilation的引用的回调函数。这些compilation提供回调函数连接成许多构建过程中的步骤。
function HelloCompilationPlugin(options) {} HelloCompilationPlugin.prototype.apply = function(compiler) { // Setup callback for accessing a compilation:
compiler.plugin("compilation", function(compilation) { // Now setup callbacks for accessing compilation steps:
compilation.plugin("optimize", function() {
console.log("Assets are being optimized.");
});
});
}); module.exports = HelloCompilationPlugin;
更多关于在compiler, compilation等对象中哪些回调有用,看一下
plugins API
异步编译插件
有些compilation插件的步骤时异步的,并且会传入一个当你的插件运行完成时候必须调用的回调函数。
function HelloAsyncPlugin(options) {} HelloAsyncPlugin.prototype.apply = function(compiler) {
compiler.plugin("emit", function(compilation, callback) { // Do something async...
setTimeout(function() {
console.log("Done with async work...");
callback();
}, 1000); });
}); module.exports = HelloAsyncPlugin;
例子
我们了解了Webpack compiler和各个compilations,我们就可以用它们来创造无尽的可能。我们可以重定当前文件的格式,生成一个衍生文件,或者制造出一个全新的assets
下面我们将写一个简单的插件,生成一个filelist.md文件,里面的内容是,列出我们build的所有asset 文件。
function FileListPlugin(options) {} FileListPlugin.prototype.apply = function(compiler) {
compiler.plugin('emit', function(compilation, callback) {
// Create a header string for the generated file:
var filelist = 'In this build:\n\n'; // Loop through all compiled assets,
// adding a new line item for each filename.
for (var filename in compilation.assets) {
filelist += ('- '+ filename +'\n');
} // Insert this list into the Webpack build as a new file asset:
compilation.assets['filelist.md'] = {
source: function() {
return filelist;
},
size: function() {
return filelist.length;
}
}; callback();
});
}; module.exports = FileListPlugin;
编写webpack 插件的更多相关文章
- 从0开始编写webpack插件
1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...
- 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解
webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...
- 【babel+小程序】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历
话不多说先上图,简要说明一下干了些什么事.图可能太模糊,可以点svg看看 背景 最近公司开展了小程序的业务,派我去负责这一块的业务,其中需要处理的一个问题是接入我们web开发的传统架构--模块化开发. ...
- Qt 显示透明flash和编写QtWebkit插件
Qt 有两种方法可以显示flash. 1. 通过QAxWidget 调用com形式显示flash, 需要本机安装IE flash插件 2. 直接通过qwebview显示flash, 需要下载webki ...
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- 使用Qt编写模块化插件式应用程序
动态链接库技术使软件工程师们兽血沸腾,它使得应用系统(程序)可以以二进制模块的形式灵活地组建起来.比起源码级别的模块化,二进制级别的模块划分使得各模块更加独立,各模块可以分别编译和链接,模块的升级不会 ...
- [翻译]如何编写GIMP插件(一)
近期想尝试编写gimp插件,在gimp官网看到了三篇简明教程,顺便翻译了下,由于本人英文,计算机知识有限,文中难免有warning,error出现,欢迎指正. <How to write a G ...
- webpack 插件拾趣 (1) —— webpack-dev-server
结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉, ...
- Lua编写wireshark插件初探——解析Websocket上的MQTT协议
一.背景 最近在做物联网流量分析时发现, App在使用MQTT协议时往往通过SSL+WebSocket+MQTT这种方式与服务器通信,在使用SSL中间人截获数据后,Wireshark不能自动解析出MQ ...
随机推荐
- mybatis提取<where><if>共用代码
mybatis项目dao层中很多sql语句都会拥有某些相同的查询条件,以<where><if test=""></if></where&g ...
- 将本地项目托管到github 并预览
本地文件上传到github的步骤 1.先在github上建立一个仓库 2.将此仓库download 3.在此文件夹中git bash here 4.进行如下git操作 git git init git ...
- rpm-yum_install_software
rpm -ivh software_name安装软件 打印详情rpm -q software_name查询软件是否安装rpm -ql software_name查询安装目录rpm -e softwar ...
- C语言之随机数函数( rand() )的使用方法
文章出自个人博客https://knightyun.github.io/2018/04/25/c-rand-number,转载请申明. 在程序设计中,难免会使用到随机值函数,其原理与语法大多类似,接下 ...
- 【转】 不需要任何权限获得Android设备的唯一ID
不需要任何权限获得Android设备的唯一ID,权限android设备id 这个问题来自于Is there a unique Android device ID? 我对这个问题的答案做了整理,包括将另 ...
- 20155307 2016-2017-2 《Java程序设计》第9周学习总结
20155307 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC(Java DataBase Connectivity)即java数据库连接,是一种 ...
- JavaWeb总结(十四)
无脚本JSP表达式语言EL JSP页面中显示结果 jsp:useBean和jsp:getProperty两个元素冗长而笨拙 jsp:getProperty只支持对简单Bean属性的访问 public ...
- python基础学习1-计数器实例
#!/usr/bin/env python # -*- coding:utf-8 -*- import time as t class MyTimer: def __init__(self):#重写初 ...
- linux下centos7中mysql崩溃问题的解决
---恢复内容开始--- 出现错误: 尝试解决: 错误解释是说系统运行过程中丢失了pid:我最先想到是 可能磁盘满了:于是 df -h 检查了一下:磁盘并没有满! 于是我对/etc/my.cnf [m ...
- P3871 [TJOI2010]中位数
傻逼题 维护两个系统堆即可 #include<bits/stdc++.h> #define il inline #define vd void typedef long long ll; ...