最近写了个小插件报了个警告,然后去百度了一下,全都给我说extract-text-webpack-plugin这个插件有问题要更新,我也是无语了,这个插件我用都没用,百度翻了下齐刷刷全是这个答案,搞得我都怀疑自己然后把node_modules翻了一遍确定没有使用这个插件,后来去谷歌上搜了一下,第一条就告诉我为什么了,直白来说,webpack里的Tapable类的plugin已经废弃了,请使用hooks api来替代,那插件的代码怎么写呢

<script>
// 旧的使用方法
class myPlugin {
constructor (doneCallback, failCallback) {
// 初始化
}
apply (compiler) {
var that = this;
compiler.plugin('compilation', function (compilation, options) {
compilation.plugin('htmlWebpackPluginAlterAssetTags', function (
htmlPluginData,
callback,
) {
console.log('在别人的插件勾子里做些处理');
});
});
}
}
</script>
<script>
// 新的使用方法
class myPlugin {
constructor (doneCallback, failCallback) {
// 初始化
}
apply (compiler) {
var that = this;
compiler.hooks.compilation.tap('myPlugin ', compilation => {
compilation.hooks.htmlWebpackPluginAlterAssetTags.tap('ScriptWebpackPlugin', htmlPluginData => {
console.log('在别人的插件勾子里做些处理');
});
});
}
}
</script>

这样子就不会报警告了,看到自己写的代码出现警告还是挺不爽的,现在的文章好多都是过时的和复制的真的误导人,webpack的插件钩子在这里https://webpack.js.org/api/compiler-hooks/#aftercompile

写webpack插件报警告Tapable.plugin is deprecated. Use new API on .hooks instead解决方案,webpack4插件新写法的更多相关文章

  1. webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instead

    webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instea ...

  2. Tapable.plugin is deprecated. Use new API on `.hooks` instead

    问题描述 在使用extract-text-webpack-plugin给webpack打包时出现报错 Tapable.plugin is deprecated. Use new API on `.ho ...

  3. DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead extract-text-webpack-plugin 提取css报错

    深入浅出Webpack 1-5 使用pulugin extract-text-webpack-plugin 提取css报错 DeprecationWarning: Tapable.plugin is ...

  4. The command ("dfs.browser.action.delete") is undefined 解决Hadoop Eclipse插件报错

    Hadoop Eclipse插件 报错. 使用 hadoop-eclipse-kepler-plugin-2.2.0.jar 如下所示 Error Log 强迫症看了 受不了 The command ...

  5. IDEA maven 项目报警告解决(自己的maven配置记录)

    IDEA maven 项目报警告解决 应该是JDK版本太低 虽然你装的高但是默认使用maven 默认的 这里要配一下JDK版本 理解不深入只为 自己记录使用 1 配置 仓库为阿里云   配置本地储存j ...

  6. 手写webpack核心原理,再也不怕面试官问我webpack原理

    手写webpack核心原理 目录 手写webpack核心原理 一.核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二.基本准备工作 三.获取模块内容 四.分析模块 五.收集依赖 六.ES6 ...

  7. maven插件报错之解决

    maven插件报错之解决 用m2eclipse创建Maven项目时报错 maveneclipsebuilddependenciesauthorizationplugins 用m2eclipse创建 ...

  8. dojo表格分页插件报错

    dojo表格分页插件报错 (1)dojo/parser::parse() error ReferenceError {stack:(...),message:"layout is not d ...

  9. webpack 打包报错:One CLI for webpack must be installed. These are recommended choices, delivered as separate packages

    webpack 打包报错: One CLI for webpack must be installed. These are recommended choices, delivered as sep ...

随机推荐

  1. 手写一个超简单的Vue

    基本结构 这里我根据自己的理解模仿了Vue的单文件写法,通过给Vue.createApp传入参数再挂载元素来实现页面与数据的互动. 其中理解不免有错,希望大佬轻喷. 收集数据 这里将Vue.creat ...

  2. 智能停车场车牌识别系统【python】

    百度AI:https://ai.baidu.com  申请App_id 代码重点:pip install  baidu_api from aip import AipOcr import os # 百 ...

  3. 构建前端第9篇之(上)---Vue组件引入,使用

    张艳涛写于2020-1-25日 一.想写下vue引入组件和插件的理解 今天是星期一,周末也看俩两天,在这个几天了,比较迷,主要是从开始学习import指令开始的,import 是es6的语法, imp ...

  4. nuxt服务部署到云上全程记录

    首先,在使用脚手架nuxt-app中创建项目时,箭头选用不起作用,这是因为git bash在windows中交互问题,临时的解决办法是换用cmd 登录云服务器后,首先安装nodejs yum inst ...

  5. 论文笔记:(2019CVPR)PointConv: Deep Convolutional Networks on 3D Point Clouds

    目录 摘要 一.前言 1.1直接获取3D数据的传感器 1.2为什么用3D数据 1.3目前遇到的困难 1.4现有的解决方法及存在的问题 二.本文idea 2.1 idea来源 2.2 初始思路 2.3 ...

  6. CCS box-flex属性

    box-flex==按比例分配父标签的宽度or高度空间 1.非固定分配 eg.一块地总150平方分配给三孩子,按照2:1:1分 #老大 { 房子-分配: 2; } = 75平 #老二 { 房子-分配: ...

  7. Apache httpd的web服务

    Apache httpd的web服务 适用于Unix/Linux下的web服务器软件 Apache httpd(开源且免费),虚拟主机,支持HTTPS协议,支持用户认证,支持单个目录的访问控制,支持U ...

  8. SQL注入:基本查询原理

    SQL注入概述 sql注入不需要精通sql的各种命令,只需要了解几个命令并会使用即可. SQL注入:一种针对于数据库的攻击 现在的web网站都需要数据库的支持. SQL部分重要内容: 库:databa ...

  9. Git (10)-- 打标签(git tag)

    @ 目录 1.列出标签 2.创建标签 2.1.附注标签 2.2.轻量标签 3.后期打标签 4.共享标签 5.删除标签 6.检出标签 超详细 Git 图文版小白教程(持续更新) 像其他版本控制系统(VC ...

  10. 博客CSS样式 二

    预览 可自行更改颜色 背景图 页面定制 CSS 代码中加入: url为背景图地址,可下载心仪背景图后上传到博客园相册后获取地址 body { color: #000; background: url( ...