自定义Webpack插件:哪个钩子用于访问转换后的代码
自定义Webpack插件中，可以使用afterEmit钩子来访问转换后的代码。
afterEmit钩子是Webpack编译完成并且输出文件到输出目录之后触发的钩子。在这个钩子中，可以获取到编译后的代码，并进行进一步的处理或者分析。
使用afterEmit钩子可以实现一些自定义的操作，比如生成额外的文件、上传文件到服务器、发送通知等。在插件的apply方法中，可以通过以下方式来使用afterEmit钩子：
class MyCustomPlugin {
apply(compiler) {
compiler.hooks.afterEmit.tap('MyCustomPlugin', (compilation) => {
// 在这里访问转换后的代码
const assets = compilation.assets;
// 进行进一步的处理或者分析
});
}
}在上述代码中，compilation.assets是一个对象，包含了编译后的所有输出文件。可以通过遍历这个对象来访问每个输出文件的代码。
关于腾讯云相关产品和产品介绍链接地址，可以参考腾讯云官方文档：
相关·内容
我正在处理一个定制的i18n模块，并希望替换这段代码(这是一个“关于-us”的页面)：
const messages = (await import(`./about-us.${locale}.json`))
.default as Messages;
通过
const messages = (
await import(`./${__filename.replace('.tsx', `.${locale}.json`)}`)
).default as Messages;
不幸的是，__filename决定使用/index.js (我猜是因为Webp
浏览 0提问于2021-04-02得票数 5
回答已采纳
1回答
例如，当与webpack创建捆绑时，它输出的角度如下。
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");
但我希望产出是这样的：
/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpac
浏览 4提问于2019-11-06得票数 6
我试着在一个webpack插件的某个加载器完成工作后，获得加载器转换后的文件内容。这对于另一个加载器来说通常是理想的，但我也需要访问一个钩子，当转换过程结束时调用它(因此选择编写一个插件)。我是否需要一个不同于emit的钩子，以及允许访问转换后的文件内容的参数的属性是什么？ compiler.plugin('done', () => {
// some finalization code
});
compiler.plugin('emit', (compilation, callback) => {
浏览 39提问于2019-04-18得票数 1
回答已采纳
我想要创建一个webpack插件，它检查代码基，并可选择地将编译标记为失败，并导致webpack (如果不是运行在手表模式下)以非零返回代码退出。
我注意到插件可以报告这样的错误：
compilation.errors.push(new Error('foo error'))
然而，这样的错误不会导致非零返回代码。似乎加载器(基于对babel-loader的检查)可以通过抛出异常来实现这一点。
如何使webpack从插件中使用非零返回代码退出？，假设设置了bail标志，并且不想使用以下黑客：
if (bail) {
process.on('exit',
浏览 3提问于2016-12-29得票数 1
回答已采纳
在构建被封存之前，webpack会暴露依赖树吗？我搜索了整个编译器实例，但没有找到任何关于依赖树的信息。似乎应该有一个隐藏在该对象中的某个地方，因为为了稍后输出stats.json，webpack必须知道这棵树是什么。
我试过使用dependency-tree npm包，但它不支持我的webpack配置中的一些内容，所以树是不完整的。
浏览 5提问于2017-11-29得票数 17
我无法从webpack的网站或他们的包依赖中搞清楚webpack到底是如何在本地文件系统上读写文件的。
我也想写一些自动化脚本来处理一些源代码文件，并且可以借用webpack的工作原理。
它们是否已经在库中打包了一些二进制文件？那它是如何跨平台运行的？它是在节点上运行的吗？请指点我！
浏览 1提问于2022-05-31得票数 0
回答已采纳
2回答
如何覆盖救生筏身份验证
、、、
我正拼命地想在这里重现我的救生筏猫包的例子：
我重新创建了作者的包和类：
package de.test.auth;
import java.util.Map;
import com.liferay.portal.security.auth.AuthException;
import com.liferay.portal.security.auth.Authenticator;
public class RefuseAuthenticator implements Authenticator {
public int authenticateByEmailAddress(long arg
浏览 0提问于2016-10-03得票数 0
回答已采纳
我正试图建立一个基本的天使+ webpack项目。只要我坚持单独使用angularjs ( (ngApp = angular.module('ngApp), []))，我就能让它运行得很好。每当我尝试添加一些角度扩展(ngApp = angular.module('ngApp), ['ngRoute'])的步骤时，有些东西就不起作用了。我相当肯定问题是图书馆的装货问题。我不想用保龄球，我想用Webpack来管理它。
webpack.config.js:
const path = require('path');
const CleanWebpac
浏览 0提问于2018-08-06得票数 3
回答已采纳
在生产中，我的错误越来越少。看上去好像是跟丑化Webpack插件有关，我找不到解决办法。
Webpack配置：
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
mode: "production",
entry: "./index.tsx",
resolve: {
extensions: [".js", ".tsx"]
},
module: {
r
浏览 0提问于2018-11-17得票数 9
回答已采纳
1回答
我在科德芬上找到了一个CSS动画片段，并希望将它添加到我的WordPress站点中，用于预加载器动画。
我在这里上看到过类似的问题，但我无法从那里获得的信息中解决这个问题。我想知道：
1)我应该在哪个位置添加代码页html代码？
2)我应该在哪个位置添加给定的CSS？
3)我应该在哪个位置添加任何必需的JS来使它像这里那样工作呢？
浏览 0提问于2019-04-28得票数 0
我正在做webpack插件，不知道如何在构建过程中修改模块。我想做的是：
通过自定义加载程序收集数据(很好)
加载所有模块后，收集我的加载程序收集的数据(好)
将我生成的代码插入到构建中的现有模块中(这样做如下所述，不确定这是否是最好的方法)
“更新”该模块，以便对我添加的代码进行解析，并将其“require”转换为webpack require(无法确定如何正确地完成此操作)。
目前，我正在链接到编译器上的“这个编译”，然后是编译上的“附加块-资产”。获取第一个块(目前，我还在开发中，这是唯一的块)，迭代该块中的模块，以找到我想要修改的块。然后：
将生成的源代码追
浏览 10提问于2016-01-29得票数 29
使用nativescript-vue，在升级到最新版本的nativescript后，无法运行我的应用程序。 "nativescript": {
"id": "xxx",
"tns-ios": {
"version": "6.5.1"
},
"tns-android": {
"version": "6.5.1"
}
}, App.js： import Vue from "nativescript-vue
浏览 22提问于2020-06-15得票数 0
我有点迷失在Babel选项/配置中。我想使用最近的js特性和编译(与webpack)的浏览器代码。
和与babel-preset-env有什么区别？
他们打算一起工作吗？
浏览 8提问于2017-11-13得票数 15
回答已采纳
4回答
webpack的装载机和插件有什么区别？
刚刚说：
使用插件添加通常与webpack中的包相关的功能。
我知道babel使用加载器进行jsx/ use 2015转换，但它看起来像其他常见的任务(例如复制webpack插件)，而是使用插件。
浏览 4提问于2016-05-26得票数 139
回答已采纳
我们正在为我们的公司开发基于nette的CMS，我们必须为我们的客户设计基于插件的CMS。像wordpress这样的东西，但根据我们的需要进行定制。在nette中有没有一些简单的方法来构建系统，它可以检查更新，并有一些自动安装的“插件商店”，这样用户就不需要编辑代码了？
浏览 19提问于2019-07-19得票数 1
1回答
我只在Firefox中遇到这个错误。
找不到问题的根源。
堆栈跟踪指的是节点_模块/jquery/dist/jquery.js。
结束点是jquery内的这一行。
jquery样式方法中的style[ name ] = value;，但我的应用程序代码中没有样式方法调用。也许旧的Angular.js在ng-style评估中称之为？
如有任何建议，将不胜感激。
角1.6
角5.2.9 (混合应用程序)
JQuery 3.3.1 (是的，我知道它很难看，我们将在我们的应用程序的新的角版中消除它)
UPD错误日志。
0是只读堆栈跟踪: style@webpack-internal:///./nod
浏览 1提问于2018-06-12得票数 0
回答已采纳
2回答
我们已经为Woocommerce支付集成开发了一个自定义插件，我们需要在插件文件中添加woocommerce钩子，而不包括在主题文件夹的中。
如何将自定义钩子添加到我们可以从function.php文件中调用的插件中？有什么解决办法吗？
(当我们在wordpress主题的function.php文件中添加自定义woocommerce钩子和动作代码时，代码可以正常工作，但我们需要它在我们的自定义插件文件中。)
任何帮助都将不胜感激。
浏览 1提问于2018-06-21得票数 1
回答已采纳
我已经创建了一个名为IsLoggedIn的函数，它使用带有axios.get的useEffect钩子向服务器查询用户的cookie会话时间。我想使用setInterval函数调用IsLoggedIn，如下所示：
setInterval(<IsLoggedIn></IsLoggedIn>, 2000) //--> This is in app.js
但是，我得到了一个错误：
Uncaught SyntaxError: Unexpected identifier
setInterval (async)
eval @ App.js:92
./src/Ap
浏览 0提问于2021-01-14得票数 1
1回答
我在一个函数文件中注册了两个分类法。然后将它们初始化如下：
function foo_register_post_types_and_taxonomies() {
foo_register_post_types(); // defined in lib/post_types.php
foo_register_taxonomies(); // defined in lib/taxonomies.php
}
add_action('init', 'foo_register_post_types_and_taxonomies');
问题是，在我正在构建的插件
浏览 0提问于2015-12-25得票数 0
回答已采纳
我们修改了标准的Scrum工作流，并在“进行中”和“完成”之间添加了“审查和测试”状态。现在，当对工作项发出拉请求时，我们希望自动从“进行中”转换为“评审和测试”。到目前为止，我们看到使用的唯一操作是Microsoft.VSTS.Actions.xxx，其中xxx可能是StartWork、StopWork或Checkin。
还有更多定义的行动吗？是否可以使用拉请求来执行某些操作？
浏览 3提问于2017-12-13得票数 1
回答已采纳
，正如它在标题中所说的，我似乎不能使用钩子
我知道你们中的一些人会试图告诉我这是一个副本，但在我所见过的所有问题中，似乎没有人会问，使用导入的功能组件(我试图呈现的组件)的正确方式是什么。
import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';
class App extends React.Component {
render() {
Playground
浏览 2提问于2019-03-09得票数 0
回答已采纳
我正在使用babel编译一些es6代码，当我尝试解构赋值时，它对数组很有效，但不适用于对象解构。问题代码如下。
test(){
var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
console.log(a);
console.log(rest);
}
错误日志：
ERROR in ./src/js/index.js
Module build failed: SyntaxError: Unexpected token (11:13)
9 | test(){
10 |
> 11 | var {a, b, ..
浏览 63提问于2018-02-01得票数 0
回答已采纳
我试图使用与外部应用程序的深度链接，如下所示：
<Col>
<a href="https://www.youtube.com/channel/channelname/" className="external"><img src="static/youtube.png" width='35px' alt=""/></a>
</Col>
<Col>
浏览 3提问于2020-01-08得票数 2
我正在编写一个插件，对于特定的模块，它将尝试执行在构建时生成的模块，以便将结果保存到json文件中。
为此，我使用compilation.hooks.succeedModule，它接收已经构建的NormalModule对象。然后，我试图用源替换webpack变量，比如__webpack_public_path__。
虽然它是可行的，但这种方法让人感到非常错误。好像我错过了什么。
是否有一种很好的方法可以在构建时从NormalModule对象执行模块，这些对象具有对__webpack_public_path__这样的vars的基本访问权？也许Webpack提供了一种更好的方法来做这类事情？
浏览 0提问于2018-05-12得票数 0
回答已采纳
2回答
所以我用Webpack来捆绑我的js和css。
我增加了Webpack插件-关键输出外部css文件具有关键的风格。这个文件被添加到我的(小枝)模板中。
如果我第二次运行Webpack，它可以正常工作，虽然初始构建失败了，并且我收到一个错误，说它找不到主生成的文件。如何将ExtractTextPlugin的主css文件输出公开给Webpack-插件-关键，允许它在初始构建时使用该文件并生成一个关键的css文件？
浏览 5提问于2017-10-02得票数 1
回答已采纳
标题基本上涵盖了我的问题，但基本上我想要的是
运行特定的babel插件，将我的es6导入语句转换为适当的路径
Eslint会告诉我我的代码是否有问题，其中包括是否有无法解决的路径。
其余部分将运行，将我的代码从es6转换为es5
完成
这可行吗？
更新
我用的是
//.babelrc { ..., "plugins": [["babel-root-import", { "rootPathSuffix": "./src" }]], ... }
在我的webpack配置中，我有一个bab
浏览 2提问于2016-03-01得票数 0
2回答
试图设置webpack来构建我的.js和.vue文件。
对于普通的_name() {}，似乎没有transpile风格的函数。
我认为，除非另有规定，否则它应该直接进入通用js。
不知道为什么，它只是在IE中崩溃，有一些关于分号的通用JS语法错误。
我猜是个小旗子，布景，什么的，什么地方。
在这里找些建议。
ex vue
<script>
export default {
computed: {
_name() {
return 'blah';
}
浏览 0提问于2018-10-25得票数 4
回答已采纳
3回答
巴贝尔不能改变..。在我的Redux减速器里。当我和Babel一起运行Webpack时，我一直收到一条错误消息：
ERROR in ./src/reducers/api_reducer.js
Module build failed: SyntaxError: Unexpected token (18:15)
16 | switch(action.type) {
17 | case FETCH_MESSAGE:
> 18 | return { ...state, message: action.payload };
|
浏览 0提问于2017-10-02得票数 1
回答已采纳
内置于webpack中的code支持看起来非常简单:您只需生成require/import CSS文件和webpack生成的代码就可以完成两件事：
将生成的CSS注入您的网页
返回要使用的类名字典。
而且用法也很简单：
import styles from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';
我想测试替代的CSS实现，一个PostCSS插件-因为它似乎很好地发挥与其他PostCSS插件，
浏览 3提问于2016-01-26得票数 3
回答已采纳
1回答
我的问题是关于Liferay钩子和portlet6.0。
我有钩子与jsps覆盖救生道portlet的。例如document_library/view.jsp - tested工作正常。(我设置了custom-jsp-dir等)
现在我想在这个钩子中创建我的portlet，它在最后呈现钩子的document_library/view.jsp。
但我得到了错误：
org.apache.jasper.JasperException: /WEB-INF/html/portlet/document_library/view.jsp(17,1) File "/html/portlet/docum
浏览 1提问于2011-06-24得票数 2
回答已采纳
我目前在尝试使用webpack.ProvidePlugin时得到了这个，但似乎加载不正确。这是我的environment.js
var webpack = require("webpack");
const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");
environment.loaders.append("vue", vueLoader);
environment.plugins.appe
浏览 0提问于2018-04-02得票数 8
Webpack:如何处理构建过程的完成，以及如何处理bundle.css/bundle.js？是否有可能提供一个回调函数，该函数将在建筑物完成后被调用？
浏览 0提问于2018-09-17得票数 0
回答已采纳
1回答
我试图在Webpack中生成两个单独的css表: style.css和只带前缀的style-prefixes.css。目前，它生成一个包含所有样式和前缀的文件。我的加载器在webpack： scss = {
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
{ loader: "css-loader", options: {
浏览 10提问于2020-10-12得票数 0
1回答
在这段代码中，我使用了react路由器-dom v6进行路由。
class App extends Component {
constructor(props) {
super(props);
this.state = {
accounts: [],
};
}
componentDidMount() {
getAccounts().then(r => this.setState({ // async req
accounts: r
}));
};
render() {
return (
浏览 0提问于2022-04-23得票数 3
回答已采纳
4回答
我计划对特定级别的用户进行页面限制和重定向，但我不知道如何实现。下面是我想要达到的目标的一个例子
我有一个页面，例如“新闻”页面，我希望所有的黄金会员都可以访问它。如果银牌用户试图访问它。它们应该被重定向到我希望它们被重定向的任何页面。这有可能吗。我差点忘了说，我用的是WishlistMembership插件。我已经要求一些愿望清单的支持，但到目前为止还没有答复。
浏览 0提问于2012-12-06得票数 1
在将重写参数定义并作为插件中的“register_post_type”参数传递之后，我正在尝试更改它。我的问题是，我正在使用一个插件，它定义了一个定制的post类型。我可以在插件中手动编辑重写参数；但是，这样做意味着每次插件更新时我都必须这样做。我想知道是否有一种方法可以用另一个插件或functions.php文件中的一些代码来改变这一点。
我在想，可能有一个函数允许我修改这些参数，或者我可以取消注册并重新注册自定义post类型。
有什么想法吗？
浏览 0提问于2011-06-12得票数 0
回答已采纳
我在Visual中有一个开发环境，其中我有一个WordPress主题，其中一个Webpack进程正在通过集成终端监视我的代码更改。
这个过程使用@wordpress/dependency-extraction-webpack-plugin作为Webpack过程中的插件。
直到过去几天，输入像<Inspect这样的组件的初始部分.(对于<InspectorControls>)将自动完成并自动将组件引用拉到JS文件的顶部。
import { InspectorControls } from '@wordpress/block-editor';
这也允许我在Insp
浏览 0提问于2022-09-14得票数 1
我使用的是Wordpress的一个模板，它内置了成员功能，包括成员计划。
我正在尝试做的是复制注册页面，并让每个人谁创建了一个帐户使用这个页面上的注册表单获得自动订阅付费会员计划免费。
所以我通过复制原来的页面创建了一个新的注册页面。我询问了模板的开发人员，他说我需要在页面上的某个地方使用此功能来向用户订阅付费计划。下面是函数：
ThemexCourse::subscribeUser(5244, $user, true);
5244为本站付费套餐ID。
你知道如何使用此功能配置注册表单，以便每个注册的人都可以订阅付费计划吗？
这是注册表单代码：
<?php
/*
Template N
浏览 2提问于2014-08-02得票数 0
我在问“为什么”，这是这种行为背后的原因。 该问题不是其他“如何”类型问题的重复。 // MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
fun mainFunction() {
浏览 20提问于2021-06-16得票数 0
我们有一堆视频文件是用webpack代码部署的(存储在LFS中)。
我们已经将它们移至CDN，并希望在构建过程中使用带有publicPath的webpack文件加载器将它们转换为绝对urls。
Webpack因为文件不存在而发牢骚。这是我试图编写一个解决插件来跳过它们，但我仍然得到文件找不到错误.我遗漏了什么？
var VideoResolver = {
apply: function(resolver) {
const target = resolver.ensureHook("resolved");
resolver.getHook("modu
浏览 5提问于2020-02-28得票数 2
1回答
我正在使用Dockerfile和Dockerfile运行apache气流，并且我有以下气流文件夹结构：
dags
example_dag
dag_1.py
pf_utils
__init__.py
setup.py
db.py --> get_primary_keys function
plugins
_init_.py
snowflake_operator.py --> from pf_utils.db import get_primary_keys
我已经从文件夹实用程序中创建了一个包，以便能够按照中的说明导入它
浏览 2提问于2021-08-09得票数 1
1回答
我有一个反应应用程序(学生门户)。
我的文件夹结构如下：
\- build
- webpack.config.js
\- src
- App.js
- components\
- Login\
- Login.scss
- Login.js
- Dashboard\
- Register\
- redux\
- helpers\
我的webpack很有水准。
var path = require('path');
var webpack = require('webpack');
mod
浏览 0提问于2019-01-23得票数 1
回答已采纳
如何在速度文件中使用自定义服务方法，如init_custom.vm，portal_normal.vm等。
我看到liferay在文件中提供了很多辅助工具类的变量，比如用于的$portalUtil，用于的$getterUtil等等。
那么，是否可以从UserLocalServiceImpl获取我的自定义服务的实例，如com.my.custom.service.MyCustomLocalServiceImpl的实例或liferay的服务
下面是一些psuedo代码，让您了解我需要什么：
// this code calls method from MyCustomLocalServiceImpl
浏览 2提问于2012-08-21得票数 3
回答已采纳
当然，在React中，你可以作为./component/<name>导入./component/<name>/index.js的别名。
在Webpack中，有没有办法更改默认文件的名称？在这种情况下，将index.js更改为不同的文件名？
浏览 59提问于2020-02-05得票数 1
当我运行"npm“时，我得到的不是单个build.js文件，而是4或5个javascript文件。这些javascript文件的大小约为1MB。为何会这样呢？
下面是文件夹结构
build.js
// https://github.com/shelljs/shelljs
require('./check-versions')()
require('shelljs/global')
env.NODE_ENV = 'production'
var path = require('path')
var config
浏览 0提问于2017-01-28得票数 5
回答已采纳
我在同一个repo下有几个Ember项目，并希望能够在他们所有的.html文件中重用GTM片段。
<!DOCTYPE html>
<html lang="en">
<head>
{{content-for "head"}}
<link rel="stylesheet" href="assets/employer-vendor.css">
<link rel="stylesheet" href="assets/employe
浏览 7提问于2020-05-28得票数 0
2回答
我正在尝试为liferay创建一个自定义登录portlet，因为我还需要做一些其他的事情，比如日志记录。但是，我遇到的问题是portal-impl.jar似乎被屏蔽了，所以我不能使用loginutil类。现在，我不想修改实际登录的工作方式，所以这是一个相当糟糕的事情。我读过一些关于能够使用ext之类的东西的文章(解释相当模糊)，但这似乎不是最干净的解决方案。
我在开发portlet方面有一定的经验，但在为liferay开发方面我还是个新手。
浏览 2提问于2010-11-04得票数 3
回答已采纳
2回答
我试图使用和Webpack动态import语句来实现Vue.js路由，如下所示：
const routes = [
{
component: () => import("./components/home.vue"),
name: "home",
path: "/",
},
{
component: () => import("./components/child.vue"),
name: "child",
path: "/child&
浏览 1提问于2018-01-10得票数 2
回答已采纳
我是新来的webpack。我正在尝试构建我的Vue webpack cli项目。完成后，dist文件夹创建成功。但我需要有一个dist.zip文件夹，它需要在go to next任务中传递到CICD管道中。是否需要对构建配置进行任何更改，以使输出成为zip包而不是单纯的文件夹？
浏览 16提问于2019-06-06得票数 0
假设您有一个能够编译成浏览器JavaScript、Node.js和JVM的Scala.js项目。 现在想象一下，在浏览器中，应用程序的一部分在窗口中运行，而另一部分在web worker中运行。 SBT可以捆绑两个版本的源代码吗？一个版本有一个浏览器窗口的主类，而另一个版本有一个不同的主类来运行web worker代码？ 如果是这样，您将如何配置它？ 请注意，该项目依赖于JavaScript本机库和webpack。
浏览 17提问于2019-03-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
