问题标签 [webpack-plugin]

我需要在 webpack 编译时插入 data-attr 来响应组件。例如我有这个组件：

编译后我需要这个：

我写了以下插件（我认为它几乎是完整的，但我找不到插入属性的方法）：

我一直在使用 Webpack 的 DefinePlugin.runtimeValue 将计算的设置注入我的应用程序。

webpack.config.js

然而，我真正想做的是处理带有参数的函数。IE：

应用程序.js

有没有办法在 webpack 中完成这个或类似的事情（在编译时）？

我正在尝试获取在 treeshaking 后最终出现在我的构建中的文件列表。我使用条件编译常量从包中删除开发/调试代码，Webpack 在 treeshaking 方面做得很好，我在生成的构建中找不到任何开发代码。但是我想编写一些代码来检查一些开发文件是否错误地最终进入生产构建。

我已经尝试过NormalModuleReplacementPlugin，但 Webpack 仍然会加载导入，即使它们没有被使用，它必须分析所有源以确定它们中的任何一个是否是死代码。

我尝试将插件添加到emit阶段挂钩并浏览所有模块并检查资源，但我仍然在那里找到对我的开发代码文件的引用，即使它们最终没有出现在生成的构建中。

我在那里放了一个断点并探索了块和模块的上下文，但它仍然引用了开发/测试模块。

也许有一种方法可以确定从输出中删除了哪个模块？

在我的工作项目中，我们使用 Vue 和 VueI18n 进行本地化。我们有一个 ref.js 文件，如下所示：

翻译团队需要此参考文件，它是我们的“唯一真实来源”。现在在构建时应该会生成一个 en.js 文件。en.js 文件如下所示：

基本上只用它的值替换 test 键下的对象。
现在我们有一个在后台运行的文件观察器，它在每次 ref.js 文件更改时生成 en.js 文件。我想要的是将这个 en.js 生成集成到 webpack 构建过程中。
要求是：

• 在初始构建时生成 en.js 文件
• 监视 ref.js 文件并在 ref.js 文件更改时生成 en.js

我尝试编写一个 webpack 插件，但没有走得太远。我认为步骤如下：

• 进入 beforeRun 钩子（最初生成文件）
• 进入 watchRun?/beforeCompile? -> 检查更改的文件，如果 ref.js 在其中 -> 生成文件

我不明白在哪里/如何查看哪些文件已更改？

我正在尝试编写一个 webpack 插件（我的第一个！所以请多多包涵）下载 fontello 图标字体，将它们放在 dist 文件夹中，然后生成一个包含每个图标的 SASS 变量的 icons.scss 文件。

我想这有点不合常规，因为 icons.scss 文件不应该放在 dist/ 文件夹中，而是放在 src/ 文件夹中。不过，将文件放在 src/ 中似乎并非不可能，而且它需要在那里才能让我的 app.scss 导入它。

我遇到的问题是我生成的icons.scss 文件（包含在我的SASS 主入口点（app.scss）中）在编译SASS 之前没有时间生成。

有没有办法告诉 webpack 等到我的插件完成后再继续构建？

需要明确的是，我的一切工作都比较顺利，下载了字体，生成了 icons.scss 等，唯一的问题是 SASS 在 icons.scss 存在之前编译。我也不知道哪个编译器/编译钩子最适合使用，所以我也会喜欢一些输入。

请参阅相关部分的代码摘录。我留下了我觉得事情也可以改进的评论：

编辑：我研究了文档，但发现没有示例很难知道该怎么做。我已经在几乎每个编译器和编译钩子上设置了回调，以了解它们何时以及如何运行，但这并没有真正帮助我很多。

为了预处理文件中的一些自定义非 HTML 标签.vue，我曾经（Webpack 3）能够通过插件安装加载器，该插件会将这些自定义标签转换为有效的 html/js 代码，然后 vue 加载器会看到它们并失败。

现在使用 Webpack 4 和 vue-loader (v15) 这似乎不再起作用了。似乎修改了规则（使用他们所谓的VueLoaderPlugin“投手”），这导致我的自定义加载器仍然被调用，但更改后的输出（非 html 标记的替换）似乎没有传递到 vue- loader ( templateLoader.js) 了。

除了上述之外，我无法对此进行任何进一步的调查，因此希望任何人都可以提供任何指示。本质上，我尝试在 vue-loader 开始处理文件之前运行我的客户加载器vue-loader来更改文件。.vue

我们有一个自定义设置来处理翻译，在构建时我们提取翻译，下载它们并在运行时替换它们。基本上，我们使用 babel 插件提取翻译标签，然后一旦我们拥有所有标签，就会为每种语言生成一个包含它们的文件。

例子

生成这样的标签列表

然后为每种语言获取标签的值。翻译值当前是每个标签的 javascript 函数。目前，我们为整个应用程序的每种语言生成 1 个翻译包。

然而，这个解决方案是不可扩展的，因为这会导致大量的翻译包。因此，我们想按捆绑/块拆分它。

为了解决这个问题，我们希望将翻译数据包含在块/包中。我们检查代码并提取翻译标签并找出哪些标签属于哪个块。为此，我们构建了一个插件，可以optimizeTree在编译中挂钩到钩子中。

在此之后，我们要将它们添加到相应的块中并将它们包含在代码中。

为此，我们面临几个问题：

• 有没有办法避免每种语言的构建过程？基本上一旦生成了块/包，我们可以将翻译数据添加到其中吗？我们想为每种语言生成一个块。所以我们必须为每种语言复制一些代码块'n'次。我们如何以优化的方式做到这一点。

• 如何确保对文件的导入解析为导入翻译的文件？

我正在尝试编写一个 Webpack 插件来查找并完全删除遵循某种模式的依赖项（使用requireor导入的任何内容）。import

免责声明，我知道有，IgnorePlugin但我不使用它有两个原因：

1. 我不只是删除导入，我正在记住我已删除的内容，并将创建一个包含这些依赖项的单独包
2. 更重要的是，我试图克隆该插件并记住我删除的内容，但这会导致错误。让我解释

如果我查看它的源代码，IgnorePlugin它将通过在beforeResolve钩子中返回 null 来删除它们。但这似乎并不意味着 Webpack 会真正忽略它，而不是返回一个空引用。因为我在Next.js中工作，这会导致 Next 无法找到对我已删除的内容的引用的错误。

所以，这是我的代码：

如果我运行 Webpack，一切似乎都很好，但是当我运行我的构建时，它会抛出找不到我删除的模块的错误：

Cannot find module 'next-critical/loader!/Users/luke/Arbeit/Stroeer/Projekte/paper/apps/web/src/critrical/ads.ts'

所以我想知道如何告诉 Webpack 从包中删除依赖项及其导入。

想象一下有一个 webpack.config.js 文件：

如何在我的插件中访问此信息，而不直接在我的插件构造函数中传递此信息？（我宁愿把它放在一个地方。）

我正在为 webpack 编写一个插件，它使用 EXECA 在后台启动良好的围栏。工作结束后，我将错误添加到 compilation.errors 数组中。由于 execa 在单独的进程中运行，因此在 webpack 编译过程完成后添加了错误。结果，webpack-dev-server 重新加载页面而没有错误。我不得不手动重新加载页面以查看错误。有没有办法强制 webpack-dev-server 重新加载？