问题标签 [webpack-plugin]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
webpack - Webpack DefinePlugin 支持变量还是只支持常量?
我尝试将数组传递给DefinePlugin。该数组是全局声明的,并由另一个插件(DirectoryTreePlugi,增强方法)填充。但是浏览器的调试器会显示数组是空的。
如果我在声明数组后为其分配一些值,则调试器会显示该值。似乎DefinePlugin比DirectoryTreePlugin更早被调用,但是 Webpack 配置文件中插件的顺序是DirectoryTreePlugin然后是DefinePlugin。
webpack - 如何删除 webpack 插件中的条目?
我知道如何在 webpack 插件中动态添加条目,如下所示:
但是我需要在调用 watch-run 钩子时删除添加的条目,那么如何删除条目?
webpack - 在 Webpack 4 中 Uglify 之后运行 optimize-js
使用 Webpack 4,optimize-js
Webpack 运行 Uglify 后如何运行?
似乎在早期版本的 Webpack 中,您会使用像optimize-js-plugin
. 我无法让它工作,因为 Webpack 似乎在缩小代码之前应用插件,所以optimize-js
当 Uglify 缩小时转换会丢失。
我尝试在我的 Webpack 配置中设置为,它禁用了内置的缩小,但是当我添加optimization.minimizer
到我的插件时,它似乎没有做任何事情并且我得到了未缩小的源。[]
UglifyjsWebpackPlugin
想法?
我的额外要求是我需要通过所有转换保留源映射,以便我可以从优化后、Uglify 后的源映射回原始 TypeScript 源(这样我就可以将解析崩溃堆栈变成有意义的东西)。
我的下一条路线是编写一个optimize-js
通过 Node API 调用的脚本,然后使用source-map-merger
(或类似的)来保存源映射。缺点是这样的脚本会在 Webpack 之外运行,我必须以某种方式识别所有的 webpack 输出。相当简单,但并不理想。
webpack - 为什么 webpack 的事件监听器钩子叫做 `plugin` 而不是 `on` 之类的?
在创建webpack 插件时,监听生命周期事件的方式是调用compiler.plugin
,比如这个例子,它在compile
事件发出时调用回调函数;
我的问题是,为什么 Webpack 团队会选择这种奇特的命名方案?由于他们似乎正在使用事件模式(又名观察者模式),调用函数“”不是更合适on
,例如:
webpack-4 - Webpack 4 Plugin: Add module and get result from loader
I am making a Webpack 4 plugin for fun and to try to understand its internals. The idea is simple:
- Parse an HTML template file into a tree;
- Get the asset paths from
<img src="...">
and<link href="...">
; - Add the assets to dependencies to load them through the
file-loader
; - Get the path emitted from
file-loader
(which might include a hash)and fix the nodes in the tree; - Emit the final HTML string into a file.
So far, I am stuck at step 4. Parsing the template and extracting the asset paths was easy thanks to parse5, to load the assets, I used the PrefetchPlugin but now I don't know how to get the result from file-loader
.
I need to load the result because it generates a hash and might change the location of the asset:
Not only that, but I want to use the url-loader
later which might generate the asset encoded. I am trying to get the result from the loader at tapAfterCompile
.
The current source code for the plugin is as follows:
webpack - 控制文件不在顶部生成新的依赖块
我是编写 Webpack 插件的新手。
我想向现有的 Webpack 插件存储库添加新功能。
功能是在 .json 文件中解析子包的结构,然后子包根目录下的依赖项应该从主包供应商捆绑器中分离出来。
例如,我的 app.json:
所以如果我的项目src
结构看起来像:
然后我希望它的dist
输出是这样的:
或者:
当前 repo 的能力是将所有依赖项分块在一起并将其输出到根路径的供应商文件。
所以我的代码是:
然后我applyCommonsChunk
过滤来自子包根的依赖项:
然后我vendor.js
的没问题,可以像 [[ CASE A ]] 一样输出,但是sub/one.js
有服务的副本,而不是从sub/one.service.js
.
parsing - 如何更新每个块的模块的源代码?
最近,我开始学习如何构建 webpack 插件。我正在尝试构建一个可以更新我的源代码的插件。
规则很简单:
- 如果入口点名称少于 2
a
秒,我必须将所有变量重命名haha
为hehe
所述入口点块中的所有模块中的所有变量。 - 如果入口点名称超过 2
a
秒,我必须将所述入口点haha
块中所有模块的所有变量重命名为。hoho
这是我的代码:
一个.js
几个.js
很多.js
webpack.config.js
我不知道这样做的正确方法是什么。
一开始我以为我的插件要注册到解析器的特定钩子上,检查当前入口点的名字,替换掉AST节点的名字。问题是该模块a.js
只被解析一次。
我尝试的第二种方法是通过简单的正则表达式注册到并重命名变量的render
钩子。mainTemplate
我不喜欢这种方法,因为通过正则表达式替换代码非常困难(IMO)。
你怎么看?正确的方法是什么?
asp.net-core - 在 Vue.js 站点上使用带有 HardSource 的 Webpack 意外和神秘的 dotnet 运行“失败”消息
当我使用 启动我的 Vue.js .NET Core 项目dotnet run
时,我收到以下“失败”消息,但该站点似乎运行良好。任何人都知道为什么我会收到这些消息以及如何解决它?
webpack - 如何调试 chunk.isInitial() 不是函数
我正在更新到 webpack@4.23,我在TypeError: chunk.isInitial() is not a function
我的一个自定义 webpack 插件中遇到了这个编译错误,可能是我们需要更新一些语法,但基本上我想知道的是如何调试 webpack 插件,因为我可能会跑到最肯定的其他一些编译错误:D
这是插件的片段
webpack - 仅使用标志运行 Webpack 插件
我的 Webpack 配置中有一些插件:
但是我想在我刚运行时不启动这个插件npm run start
,但是如果我添加一些标志就运行,npm run start --plugin
例如。是否可以在不将 Webpack 划分为不同配置的情况下实现这一点?