问题标签 [webpack-plugin]

我正在编写一个库，您可以使用它将 React 应用程序呈现为 Web 组件。像这样：

你可以看到有一个选项{ css: 'inject' }。要使用 CSS 创建 Web 组件，我需要将<link>标签添加到 shadow dom。这发生在我的图书馆内。

虚拟代码：

现在我当然不想附加字符串'inject'。相反，我想编写一个 Webpackplugin或者获取由extract-text-webpack-pluginloader生成的 CSS 文件并在有. 所以从<link>'inject'

我想生成这个

我认为替换部分可以很容易地完成RegEx，但是我很困扰如何获取 CSS 文件名以及如何转换 JS 文件。

我正在编写一个 Webpack 插件，它应该用 Webpack 生成的 CSS 文件列表替换部分 JS 代码。成像这个 JS 代码：

我想injectReactWebComponent: true用

而那个链接标签是由 Webpack 生成的文件。

我的（工作类型）代码如下：

看我做的那一行

我直截了当地重写了来源。

但这似乎不适合我。看来我正在转换的代码已经生成，不应该再转换了。我也很确定我用这个打破了源地图。

所以我想知道，什么是实现我正在做的事情的合适方法？

我猜测我应该使用转换部分loader，但是加载器不知道生成的文件名，或者是吗？

任何帮助，将不胜感激！

我想在加载器和我的运行时代码之间进行通信。具体来说，我想编写一个加载器，它将所有已加载的 CSS 存储在一个我可以在运行时读取的变量中。这里有一些虚拟代码来说明：

myLoader.js

应用程序.js

例如，webpack.DefinePlugin我可以这样做：

现在，在我的加载程序和运行时代码中，我都可以访问SOME_GLOBALLY_AVAILABLE_CONST和获取'my value'. 是否可以编写一个插件来做同样的事情但实现storeCss，getStoredCss所以我可以在我的加载器和我的运行时代码中访问它们？

TypeError: SuppressChunksPlugin 不是 Object 的构造函数。(/Users/rohit/WebstormProjects/myProjectStructure/webpack.config.js:80:9) 在 Module._compile (module.js:570:32) 在 Object.Module._extensions..js (module.js:579:10 ) 在 Module.load (module.js:487:32) 在 tryModuleLoad (module.js:446:12) 在 Function.Module._load (module.js:438:3) 在 Module.require (module.js:497 :17) 在 require (internal/module.js:20:19) 在 requireConfig (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:97:18) 在 /usr/local/lib/ node_modules/webpack/bin/convert-argv.js:104:17

以下是网络配置文件。

我正在编写一个代码分析 webpack 插件，它想要在 webpack 包中查找函数名称的所有实例。

我为这个问题做了一个回购：https ://github.com/RonPenton/webpack-parser-fail-demo

所以解析器非常简单，看起来像这样：

https://github.com/RonPenton/webpack-parser-fail-demo/blob/master/parse.js

我要做的就是在代码中找到 $findme() 的所有实例并记录有关它们的信息。稍后，我什至可能会改变电话，但那是另一天的事了。

当我提供这个源文件时，一切都很好：https ://github.com/RonPenton/webpack-parser-fail-demo/blob/master/good.js

当我运行 webpack 时，输出显示找到了两个实例：

但是当我使用不同的入口点时，函数是在本地（https://github.com/RonPenton/webpack-parser-fail-demo/blob/master/bad.js）或在外部模块（https ://github.com/RonPenton/webpack-parser-fail-demo/blob/master/bad2.js），突然解析器停止查找这些方法。

====

那么有什么关系呢？我尝试深入研究 webpack 源代码，据我所知，这似乎是故意的。但是实际上没有关于为什么这样做的文档，也没有评论。

这不是可以用插件完成的吗？

我在这里先向您的帮助表示感谢。

我正在查看包含以下代码的 webpack 配置：

我从webpack 文档中看到，ProvidePlugin它用右侧的模块替换左侧的值（获取），而无需任何import必要。

我可以按照文档中的示例进行操作，例如

在代码中遇到$或遇到的任何地方加载到 jquery 模块中。jQuery但是我的代码看起来不像是一个js模块，那么它在做什么呢？

和webpack.config.js

当我尝试在浏览器中打开 ( index.html) ...

未捕获的 ReferenceError：进程未在 Object 中定义。(db.js:8) 在 Object.defineProperty.value (main.js:12716) 在 Object.crypto (main.js:12727) 在webpack_require (bootstrap 2becb557cb7088856bca:19) 在 Object.defineProperty.value (main.js: 18506）在对象。(main.js:18519) 在webpack_require (bootstrap 2becb557cb7088856bca:19) 在 Object.defineProperty.value (_replacer.js:8) 在 Object. (_replacer.js:8) 在webpack_require (bootstrap 2becb557cb7088856bca:19)

在db.js我有..

我正在做一个有很多不同模板的项目，目前大约有 67 个。每次我对 1 个文件进行更改时，Webpack 都会开始重新编译每个把手模板，这使得它非常慢。

我想知道是否有办法减少工作量/优化速度。

我在 Webpack 中的 Handlebars 工作流程如下所示：

我有一个包含多个反应组件的仓库，这些组件需要彼此完全分开工作，因此每个组件都有自己的输出目录，其中包含各自的 CSS、JS 和 HTML。为了实现这一点，我迭代了一个包含所有组件名称的数组，添加了入口点、HTMLWebpackPlugin、SASS 和 CSS 加载器以及提取文本插件，每个都带有组件的路径。

这仅适用于一个组件，但由于某种原因，当添加第二个组件时，第一个组件的样式会消失，这意味着相应的 CSS 文件只有全局样式，而不是组件特定的样式。这可能与 ExtractText 插件无法与多个实例一起正常工作有关，但我真的不确定。

Webpack 构建输出的屏幕截图

查看 webpack 构建输出，您可以看到，第二个 css 文件要小得多，因为它只有全局样式。让我恼火的是，两个 css 文件都列出了两个组件块，这是什么意思？

这里有没有人对此有适当的解决方案或试图实现类似的目标？他们是我不知道的明显方式吗？提前非常感谢！

我正在制作一个注入内容脚本的 chrome 扩展。我不希望 webpack 处理内容脚本。

我的目录结构：

这是我调用 webpack 的 gulp 任务：

我想将目录结构保留在构建目录中，而不是让里面的文件content/被解析，即。使用file-loader

但它们只是被解析，我pre的内容脚本规则被忽略了。