在 chainWebpack 中,可以使用 tap 方法监听打包完成的事件,报错:Cannot call .tap() on a plugin that has not yet been defined. Call plugin('done').use(<Plugin>) first.
时间: 2023-06-11 09:07:43 浏览: 234
这个错误提示是因为在使用 `tap` 方法时,需要先定义一个插件,然后再使用 `tap` 方法进行监听。
你可以在 `chainWebpack` 中使用 `plugin` 方法定义一个插件,然后使用 `tap` 方法进行监听。
例如,在监听打包完成事件时,可以这样写:
```javascript
chainWebpack: config => {
config.plugin('done').tap(() => {
console.log('打包完成!');
});
}
```
注意,这里使用了 `tap` 方法的前提是已经通过 `plugin` 方法定义了一个插件,所以在使用 `tap` 方法前,需要先调用 `plugin` 方法定义一个插件。
如果你需要在多个地方监听同一个事件,可以先定义一个插件,然后在多个地方使用 `tap` 方法监听这个插件。这样可以避免重复定义插件的问题。
相关问题
ERROR Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.
这个错误的原因是在调用.tap()方法之前没有先定义插件。根据提供的解决办法,你可以在vue.config.js文件中添加以下代码来解决这个问题:
module.exports = {
chainWebpack(config) {
config.plugin("preload").tap(() => [
{
rel: "preload",
fileBlacklist: [/\.(?:map|hot-update)\.(?:js|css)$/, /runtime\..*\.js$/],
include: "initial",
},
]);
config.plugin("preload-index").tap(() => [
{
rel: "preload",
fileBlacklist: [/\.(?:map|hot-update)\.(?:js|css)$/, /runtime\..*\.js$/],
include: "initial",
},
]);
config.plugin("preload-qr").tap(() => [
{
rel: "preload",
fileBlacklist: [/\.(?:map|hot-update)\.(?:js|css)$/, /runtime\..*\.js$/],
include: "initial",
},
]);
},
};
以上代码会在webpack配置中定义三个插件,并在调用.tap()方法之前先定义了这些插件,从而解决了错误。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue Cli 配置多入口报错解决办法 Cannot call .tap() on a plugin that has not yet been defined](https://blog.csdn.net/qq_40259641/article/details/124730930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('preload').use(<Plugin>) first.
这个错误是由于在调用`.tap()`方法之前尚未定义插件所引起的。解决方法是首先调用`plugin('preload').use(<Plugin>)`来定义插件。下面是一个示例代码,演示了如何解决这个错误:
```javascript
// vue.config.js
module.exports = {
pages: {
index: {
entry: "src/main.js",
},
qr: {
entry: "src/qr.main.js",
},
},
chainWebpack(config) {
config.plugin("preload-index").tap(() => [
{
rel: "preload",
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: "initial",
},
]);
config.plugin("preload-qr").tap(() => [
{
rel: "preload",
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: "initial",
},
]);
},
};
```
这段代码中,我们在`chainWebpack`方法中调用了`config.plugin("preload-index").tap()`和`config.plugin("preload-qr").tap()`来定义插件,并使用`.tap()`方法来配置插件的选项。