新安webpack插件后编译报错compiler.plugin is not a function

这篇具有很好参考价值的文章主要介绍了新安webpack插件后编译报错compiler.plugin is not a function。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        安装使用generate-asset-webpack-plugin时报错TypeError:compiler.plugin is not a function,网上搜索了一下大概就是webpack5与这些插件不匹配。推荐的方法几乎都是换一个适配的插件版本,但我所需要的这个插件在npm上最近更新时间是7年前💔。等不着作者适配于是决定自己改。

  •  先看解决办法:主要也只是webpack升级后,触发钩子的写法变了而已

        找到报错的文件,搜索“compiler.plugin”定位到问题所在,修改写法(如下),打个补丁,提交一下✔️。

原先代码:

 compiler.plugin('emit', function (compilation, cb) {})

修改后:

  compiler.hooks.emit.tapAsync('GenerateAssetWebpackPlugin',(compilation,callback)=>{})

新安webpack插件后编译报错compiler.plugin is not a function

  •  在接触到问题之前对于webpack的使用仅在于配置代理服务器 😢 ,后面就大概记录一下修改的思考过程与新get到的知识点。【以下的“类似于”仅因为自己接触知识点的前后顺序,不在于本身发布前后顺序,我猜测wabpack肯定比vue早出现😂

🌷 看到compiler的时候还不知道这是个啥东西,怎么就调了一个plugin方法。在当前文件没搜到后就开始了百度之旅(刚开始还以为plugin是创作者自定义的)。然后就了解到webpack的CompilerCompilation 对象,个人理解Compiler粒度更大,类似于编译器实例,生命周期类似于APP的应用周期,整个生命周期只会执行一次(惨兮兮只有一条命)。

🌷 plugin是定义在webpack原型apply上的一个方法,用于调用webpack的钩子函数(类似于vue中mounted、created这种函数,会在特定的时间段进行调用),第一个参数为钩子函数名称,第二个参数为回调函数。关于钩子的种类及定义可查看文档compiler 钩子

 🌷 但在webpack5中,plugin方法被取消了!所以报错is not a function。输出一下complier对象也会发现无这个属性【具体complier有什么属性可以看看依赖里的这个文件node_modules\webpack\lib\Compiler.js

🌷 既然触发生命周期的方法变了,更新一下为最新版本的写法就好了。查看文档作出修改,至少问题就解决了~

  •  看一下源码部分,以便更好的理解(node_modules\webpack\lib\Compiler.js
  1. 在类中一开始就定义了一个不可修改的钩子函数集合hooks,所以会区分complier钩子与compilation钩子。毕竟complier和compilation是两个不同类新安webpack插件后编译报错compiler.plugin is not a function
  2. 这里new的AsyncSeriesHook 又是什么​呢?字面意思是异步串行钩子,搜一下

      

新安webpack插件后编译报错compiler.plugin is not a function

 

新安webpack插件后编译报错compiler.plugin is not a function

 所以这里输出的这些函数都是tapable中的😮,具体看文档  tapable,简单过一下定义后就看看那个插件generate-asset-webpack-plugin吧。webpack太长了关于其什么阶段调用了什么钩子就等把webpack基础概念和原理补完再看👻

  • generate-asset-webpack-plugin

         这个代码挺少就看完了,查看官网自定义插件。自定义插件 | webpack 中文文档 | webpack 中文文档 | webpack 中文网

🧩 一个 JavaScript 命名函数或 JavaScript 类。

🧩 在插件函数的 prototype 上定义一个 apply 方法。

🧩 指定一个绑定到 webpack 自身的事件钩子。【这里就是指定的emit钩子

🧩 处理 webpack 内部实例的特定数据。【使用fs模块处理的

🧩 功能完成后调用 webpack 提供的回调。【callback结束异步操作

        其他的还好,主要是不理解为什么不直接在插件函数原型上定义apply ,而要去调用一个自执行函数并使用 defineProperty给apply方法定义一些数据属性,是为了将apply()方法做响应式嘛?😵是的话这么做有啥好处呢?

新安webpack插件后编译报错compiler.plugin is not a function文章来源地址https://www.toymoban.com/news/detail-424020.html

到了这里,关于新安webpack插件后编译报错compiler.plugin is not a function的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • keil 报错 *** Target ‘Target 1‘ uses ARM-Compiler ‘Default Compiler Version 5‘ which is not available

    问题:*** Target ‘Target 1’ uses ARM-Compiler ‘Default Compiler Version 5’ which is not available. 这个错误是由于使用的 ARM 编译器“Default Compiler Version 5”不可用导致。 原因是新版的keil不在自动下载v5版本的编译器,但是老版本使用的v5,所以需要手动安装v5的编译器。下载v5.06的编译器并

    2024年02月05日
    浏览(40)
  • IDEA运行报错:Cannot start compilation: the output path is not specified.

    报错信息: “Cannot start compilation: the output path is not specified for module \\\"TestJar\\\". Specify the output path in the Project Structure dialog.” 原因分析: Output directory is not specified 报错的意思是没有指定输出路径。idea需要在项目下生成一个out输出文件目录,该目录下会存放java文件运行后的字节

    2024年02月12日
    浏览(49)
  • 解决:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin 命令行mvn打包的时候报错:No compiler is provided in this environment. Perhaps you are running on a JRE

    1.mvn clean install -DskipTests; idea terminal 打包报错(用idea右边maven插件打包是没有问题的)。 [ INFO ] BUILD FAILURE [ INFO ] ------------------------------------------------------------------------ [ INFO ] Total time:  1.095 s [ INFO ] Finished at: 2022-03-30T03:40:49+08:00 [ INFO ] --------------------------------------------------

    2024年02月08日
    浏览(59)
  • vivado 仿真报错:ERROR: [VRFC 10-2987] ‘xxxxx‘ is not compiled in library ‘xil_defaultlib‘

    在Design Sources窗口下,选中报错的IP,比如除法器,右键:  选择第一个Autumatic Update and Compile Order即可。

    2024年02月07日
    浏览(39)
  • Webpack:HTML Webpack Plugin插件

            HTML Webpack Plugin 插件,在Webpack构建的前端项目中,用于简化index.html文件的创建,以免除项目打包之后手动创建/拷贝index.html到打包目录下的繁琐步骤。以下,从一个已构建好的Vue项目中的一个现象谈起,逐步深入了解此插件的使用。 目录 从Vue项目中的index.html谈起

    2024年02月07日
    浏览(40)
  • 找不到插件 ‘org.apache.maven.plugins:maven-compiler-plugin:‘

    太坑啦,打开idea突然给我报这个错误,不知所以然。 找了好多教程,发现是version的问题。 找到maven本地仓库以下路径 apache-maven-3.8.6maven-repoorgapachemavenpluginsmaven-compiler-plugin 查看到版本号 添加版本号. 然后就不报错了    

    2024年01月24日
    浏览(41)
  • webpack插件compression-webpack-plugin

    1、为什么要压缩? 打包的时候开启gzip可以很大程度减少包的大小,页面大小可以变为原来的30%甚至更小,非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验 2、为什么gzip压缩后页面加载速度提升 浏览器向服务器发出请求,并且

    2024年02月17日
    浏览(34)
  • 手写一个webpack插件(plugin)

    熟悉 vue 和 react 的小伙伴们都知道,在执行过程中会有各种生命周期钩子,其实webpack也不例外,在使用webpack的时候,我们有时候需要在 webpack 构建流程中引入自定义的行为,这个时候就可以在 hooks 钩子中添加自己的方法。 创建插件 webpack 加载 webpack.config.js 中所有配置,此

    2024年02月08日
    浏览(46)
  • vue3-webpack遇到Eslint各种报错 Vue 项目报错:‘XXXXX‘ is not defined ( no-undef ) 解决方法

    报错一: VUE3 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignor 原因 :与创建项目时选择的 eslint 的设置问题,可以通过“—fix”选项修复 .解决方法 : package.json //原代码 更改: 报错二: 提示建议我们使用特殊注释禁用某些警告。使用//eslint disable

    2024年02月08日
    浏览(50)
  • 【scala】编译build报错 “xxx is not an enclosing class“

    private[xxx]是访问权限控制在xxxx包的意思。 解决办法: 把[sources]删掉,或者改成和包名一致即可。

    2024年01月23日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包