问题标签 [webpack-plugin]

我正在编写一个 webpack 插件，它在包中包含一个附加文件（使用子编译器）。这工作正常，但现在我想添加手表支持。问题是，包含的文件可能取决于主编译器实例中的所有文件，因为我正在从那里提取函数。通常，这只会分解为一小部分文件，这些文件实际上正在使用插件提供的某些功能。我的想法是通过使用版本标志来实现监视支持，每当我的插件需要再次编译资源时，该标志就会增加......但是，版本仅在编译来自父编译器的所有文件后才会更改。有没有办法在父文件编译后但在资产发射之前强制重建模块（发射事件很好，如果我'

我觉得我想要实现的目标并不难.. 但是 webpack 文档处于严重混乱状态，我为此花费了很多时间。

如何将“动态”模块注入 webpack 构建？我想在构建时创建这个模块。

举个简单的例子，我如何在构建时将此字符串作为新模块注入？

然后假设我希望该模块具有名称“myDate”

我非常希望我的应用程序中的任何其他模块能够通过以下方式解决它：

现在这是一个非常简单的例子。我的目的将更加复杂，并涉及读取文件以创建此“动态”模块。我知道定义插件，不幸的是它不适合我的需要。

我将不胜感激任何帮助。谢谢。

我们使用 Webpack DefinePlugin 为不同的渲染模式生成输出包。例如，我们的 webpack 配置将返回

在代码中我们将做

这使我们能够为每种渲染模式生成更优化的包。然而，随着渲染模式的增加，我们正在运行多个 webpack 编译，大大减慢了编译过程。我对解决这个问题有一些想法，并希望听到更多的意见：

1. 有没有办法使用 1 个单一的 webpack 编译并在编译完成后定义插件替换？因此，我们无需在编译时让 DefinePlugin 替换变量，而是只编译一次，然后再进行替换。

2. 或者，有没有办法按条目定义插件？每个条目都有一个单独的 DefinePlugin 配置。

在控制台中 webpack 开发服务器的热更新期间，我看到以下消息：

我宁愿看到那里的路径名，我记得有一个插件，但在谷歌中找不到。

我正在使用 webpack 加载器ts-loader将打字稿源文件编译成 javascript 包。现在我想保存单独编译的 javascript 文件以及捆绑包！我熟悉编写一个非常简单的 webpack 插件，但我不确定如何实现它。即：不知道webpack触发了哪些事件，不知道去哪里找相关数据。有什么帮助吗？

我正在尝试为https://github.com/martinandert/babel-plugin-css-in-js编写一个 webpack 插件，在开发过程中有以下两个要求：

• 我不希望将文件写入磁盘，而是让 webpack-dev-server 将文件托管在内存中。
• 我想要热重载来加载新提取的 CSS。

（问题在底部。）

不要写入磁盘

我已经能够使用如下代码做到这一点，但是在阅读了许多不同的示例之后，我仍然不能 100% 确定这是正确的方法。

热重载

我的想法是，每当 CSS 发生变化时，我都会渲染一个新版本的小模块，它会强制样式表重新加载。然后我会让 webpack 的 Hot Module Replacement 替换该模块，因此实际上对提取的样式表有 HMR。这个重载模块看起来像：

使用最新 CSS 的哈希生成文件的 webpack 插件代码如下所示：

然而，问题是我的重新加载器 JS 模块没有重新生成，我认为这是因为输入源没有改变，它只会在编译期间改变。

我的问题基本上是：

• 我以正确的方式接近这个吗？你知道我应该看的正确例子吗？
• 或者，有没有办法让我在不使用外部输入文件的情况下编译文件，但完全来自源代码？这样我就可以自己重新生成源代码并嵌入哈希，之后 webpack 应该会注意到差异并 HMR ，对吗？

我在为翻译服务编写 Webpack 插件时遇到问题。

目标是：

1. 在编译期间获取所有必需模块的名称（和源代码）。我需要能够扫描包含的源代码以了解特殊t()功能的使用，但我只想扫描那些将包含在包中的模块（根据构建配置，这些模块可以是所有项目模块的子集）。
2. 基于收集的模块，我想动态创建其他模块（带有翻译）并将它们添加到包中。这些模块需要能够导入自己的依赖项。

另一个要求是 Webpack 的代码拆分功能应该与动态创建的模块一起使用（我想将它们提取到单独的文件中 - 例如bundle.[lang].js）。此外，这可能超出了这个问题的范围，我必须将这些带有翻译的块设为可选（因此您不必加载所有语言，而只需加载一种语言）。

更多细节可以在https://github.com/ckeditor/ckeditor5/issues/387中找到。

我一直在尝试多种解决方案，但 Webpack 2 的文档并不是很有帮助。before-resolve我可以通过监听模块解析钩子addEntry（我什么时候可以使用它？）。

我也在考虑连接 Webpack 插件和 Webpack 加载器（因为我需要的功能非常类似于Webpack 的 style-loader），但是从插件级别我只能添加加载器的路径，而不是加载器本身，所以我可以' t 将配置对象作为参数传递——我错了吗？

PS。我使用 Webpack 2。如果您觉得这些要求很奇怪，请参阅https://github.com/ckeditor/ckeditor5/issues/387 :)。

在我使用 webpack common chunks 插件创建包含第三方库（如 angular、react、lodash 等）的供应商包之前，但后来我知道了 webpack dll 插件。他们似乎做同样的事情，但 dll 插件也可以让你减少构建时间。所以我很困惑我是否需要同时使用这两个插件。我应该使用通用块插件在生产构建中创建供应商包，并在开发构建中使用 dll 插件。或者我应该在生产和开发版本中使用 dll 插件？你能解释一下吗？

这篇文章的主要目的是在编写 Webpack 插件时获取有关错误/警告管理的额外信息。

我在Webpack 插件文档中看到可以将err参数传递给基于时间的插件接口（在回调中），但没有进一步解释它如何影响 Webpack 生命周期，它的构建过程以及如何使用它。它也没有解释是否有办法管理其他类型的插件界面的错误。

无论如何，作为第一次尝试，在'emit'生命周期步骤中，我尝试传递给err参数 anew Error('An error has occurred')或仅传递一个'An error has occured'值，但在任何一种情况下，它确实在控制台中按原样显示给定的 err 参数（遗憾的是，IE 没有任何错误特定的颜色），并且 webpack-sev-server 卡住了：

所以它需要一个额外的回调调用，以使 Webpack 构建过程恢复：

不幸的是，通过这种方式，我最终只是将未着色的字符串显示到标准输出，而不会以任何方式影响 Webpack 生命周期。

我想要实现的是，在我的错误情况下，显示红色错误消息并防止捆绑构建过程以某种valid状态结束，直到新构建最终让我的插件运行没有错误。

关于警告管理，我想它必须通过process.stdout.write()直接在插件本身内调用正确的颜色来执行，或者在编译参数中提供一些警告集合......但就像我迄今为止在这个 SO 问题中报告的一样...这只是猜测：p

作为记录，我问这个问题是因为我编写了一个小型构建工具，其目标是将分散在应用程序中的所有翻译聚合到一个文件中。这是为了让我们的客户处理一个翻译文件而不是几十个。

它可以在“一次拍摄”模式或观看模式下运行，但我想最好的办法是将其作为插件直接集成到 Webpack 构建过程中。

所以请随意给我你对这个“架构”选择的看法，因为作为 Webpack 的新手，我绝对不会接受它的全部潜力，而且我可能会误导我可以/应该做什么它（当然作为旁注，因为它不是这篇文章的主要原因；）

提前感谢您的提示和技巧；）！

我正在尝试通过遵循这篇文章http://moduscreate.com/optimizing-react-es6-webpack-production-build/来减少生产反应项目的大小。不幸的是，某些步骤不起作用。其中之一是 webpack.DefinePlugin，在 webpack 中输出 webpack.DefinePlugin 无法定义的错误。也许，这是因为我在开发中构建项目，现在我想将它转移到生产中。也许，我最初必须在生产中创建项目？或者有人知道减少项目规模的更好方法吗？

webpack.config.js

此外，devtool: 'cheap-module-source-map' 不起作用，它根本没有减少项目的大小。