webpack中如何编写一个plugin
当我们在源代码里面去引入一个新的js文件或者一个其他格式的文件的时候,这个时候,我们可以借助loader去帮我们处理引用的文件,这是loader的一个作用
当我们在做打包的时候,在某一些具体时刻上,比如打包结束后,我要自动生成一个html文件,这个时候就可以使用一个htmlwebpackplugin的插件, 比如在打包之前,要把dist目录清空,这个时候可以使用clearwebpackplugin。
console.log('hello world');
webpack.config.js
const path = require('path'); module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}
package.json
"scripts": {
"build": "webpack"
}
运行npm run build,运行完成。生成main.js。输出hello world。
class CopyrightWebpackPlugin {
constructor(){
console.log('插件被使用了')
}
apply(compiler) {
}
}
module.exports = CopyrightWebpackPlugin;
格式大概长成这个样子,所以每次定义一个插件的时候,都长这个样子。
const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin');
module.exports = {
plugins: [
/**
* 所以知道为什么插件要一个new,因为是一个类,用的时候需要new一下。
* new这个插件的时候,就使用了这个插件
*/
new CopyRightWebpackPlugin()
],
}
然后运行npm run build。发现控制台打印出了'插件被使用了'。确实使用了,但是什么没干。
class CopyrightWebpackPlugin {
/**
* compiler是webpack的一个实例,这个实例存储了webpack各种信息,所有打包信息
* https://webpack.js.org/api/compiler-hooks
* 官网里面介绍了compiler里面有个hooks这样的概念
* hooks是钩子的意思,里面定义了时刻值
*/
apply(compiler) {
/**
* 用到了hooks,emit这个时刻,在输出资源之前,这里官网告诉我们是一个异步函数
* compilation是这一次的打包信息,所以跟compiler是不一样的
* tapAsync接受两个参数,第一个是名字,
*/
compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb)=>{
debugger;
compilation.assets['copyright.txt'] = {
source: function(){
return 'copyright by q'
},
size: function() {
return 15
}
};
// 最后一定要调用cb
cb();
})
/**
* 同步的时刻跟同步的时刻写代码的方式不一样
* 同步的时刻,后面只要一个参数就可以了
*/
compiler.hooks.compile.tap('CopyrightWebpackPlugin',(compilation) => {
console.log('compiler');
})
}
}
module.exports = CopyrightWebpackPlugin;
然后运行,dist下就生成了一个copyright.txt。里面是copyright by q。
"scripts": {
"debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
"build": "webpack"
},
运行debug,就可以对插件进行调试,能够可视化对看见compilation下所有的信息。debug跟build是同样的一个东西,只不过debug可以在里面传入参数,比如--inspect表示打开调试
webpack中如何编写一个plugin的更多相关文章
- webpack编写一个plugin插件
插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...
- webpack 中,loader、plugin 的区别
loader 和 plugin 的主要区别: loader 用于加载某些资源文件. 因为 webpack 只能理解 JavaScript 和 JSON 文件,对于其他资源例如 css,图片,或者其他的 ...
- 有多个正整数存放在数组中,编写一个函数要求偶数在左边由小到大顺序放置,奇数在右边,也是由小到大顺序放置,Java实现
思路: * 1.首先分左右 * 2.分好再排序(左边和右边都单独排序) 第一步:分左右 可得注意了: 大体思路最先是从两头出发分成4种情况讨论(左or右,奇数or偶数)循环处理,出口是双层的嵌套循环( ...
- 实验9-1 编写一个存储过程proc_test_func
在TestDB数据库中,编写一个存储过程proc_test_func,要求如下: 1)输入参数 一个整型的输入参数 @value 2)要求在一个select语句返回: @value的绝对值, 此绝对值 ...
- 如何编写一个WebPack的插件原理及实践
_ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...
- 22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表。然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法showB输出大写的英文字母表。最后编写主类C,在主类的main方法 中测试类A与类B。
22.编写一个类A,该类创建的对象可以调用方法showA输出小写的英文字母表.然后再编写一个A类的子类B,子类B创建的对象不仅可以调用方法showA输出小写的英文字母表,而且可以调用子类新增的方法sh ...
- Java基础-接口中国特色社会主义的体制中有这样的现象:地方省政府要坚持党的领导和按 照国务院的指示进行安全生产。请编写一个java应用程序描述上述的体制现象。 要求如下: (1)该应用程序中有一个“党中央”接口:CentralPartyCommittee,该接口中 有个“坚持党的领导”方法:void partyLeader() (2)该应用程序中有一个“国务院”抽象类:StateCouncil,
36.中国特色社会主义的体制中有这样的现象:地方省政府要坚持党的领导和按 照国务院的指示进行安全生产.请编写一个java应用程序描述上述的体制现象. 要求如下: (1)该应用程序中有一个“党中央”接口 ...
- 简单练习题2编写Java应用程序。首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”、“取款”和“余额查询”。其次, 编写一个主类,在主类中测试Account类的功能
编写Java应用程序.首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”.“取款”和“余额查询”.其次, 编写一个主类,在主类中测试Account类的 ...
- 在ubuntu linux 中编写一个自己的python脚本
在ubuntu linux 中编写一个自己的简单的bash脚本. 实现功能:终端中输入简单的命令(以pmpy为例(play music python),为了区别之前说的bash脚本添加了py后缀),来 ...
随机推荐
- node.js http-server 搭建本地服务器
使用vue-cli创建的项目,能够实现浏览器中自动刷新,实时查看项目效果,其中的原理在于,webpack在本地启动了一个本地服务器,将本机当作一台服务器: 打包后的文件是一个html静态页面,在本地文 ...
- JIRA问题状态已关闭,但是解决结果还是未解决
自己设置的工作流,状态和解决结果是没有关联的,这时候我们要配置关联关系 1.如下,状态时已关闭,但是解决结果是未解决 . 2.解决方法: 2.1设置-问题-工作流,找到目前在使用的工作流,点击编辑 3 ...
- Hive 企业调优
9.企业级调优 9.1 Fetch 抓取 Fetch 抓取:Hive 中对某些情况的查询可以不必使用 MapReduce 计算: hive.fetch.task.conversion:more 9.2 ...
- webpack package code into different bundle
Demo4操作手册 本Demo演示如何进行分块打包等较高级的使用 准备环境 初始化环境, cd到demo1目录之后, 执行如下命令: npm init -y npm install webpack w ...
- Java后台面试之java基础
经典类概念性问题 1.java支持的数据类型有哪些?什么是自动拆装箱? 12.Java有哪些特性,举个多态的例子. 14.请列举你所知道的Object类的方法. 15.重载和重写的区别?相同参数不同返 ...
- D2.Docker: 安装部署相关问题
[mysql] docker 安装完mysql 后客户端无法访问
- Git学习(二)——使用Git协同开发
项目协同开发git操作 基本流程 1.开发前,拉一次远程仓库 2.工作区进行开发 3.将开发结果提交到本地版本库 git status查看时没有待处理的事件 4.拉取远程仓库(每一次要提交远程仓库前必 ...
- PAT(B) 1049 数列的片段和(C)规律
题目链接:1049 数列的片段和 (20 point(s)) 题目描述 给定一个正数数列,我们可以从中截取任意的连续的几个数,称为片段.例如,给定数列 { 0.1, 0.2, 0.3, 0.4 },我 ...
- 网易自动化测试工具(airtest)的环境部署
airtest 环境配置: 1.安装Python2.7 及 Python3.6 版本(2个需要都安装) 2.配置python环境变量(AirtestIDE 需要在python2.x的环境下运行,所以尽 ...
- 腾讯云开发微信小程序使用体验
主体内容 代码构成 数据:JSON 配置文件 结构:WXML 模版文件 样式:WXSS 页面样式 交互:JS 脚本逻辑文件 云开发 云数据库 云函数 云存储 WXML 是小程序框架设计的一套标签语言, ...