问题标签 [webpack-loader]

我正在尝试加载一个名为 libvorbis.js 的音频编码库，它是 vorbis 的 emscripten 编译版本。

libvorbis.js 需要在其作用域内使用 window 变量执行，并将类作为 var 公开而没有导出声明。

通常链接imports-loader 和exports-loader 来获取这样的文件很容易。使用-

这会将窗口对象公开为 libvorbis.js 中的“this”，并将 VorbisMediaRecorder 作为返回到 this ，这是我的其他模块/代码稍后运行所需的。

但是，libvorbis.js 本身会覆盖“模块”变量，这会导致 export-loader 无法导出

libvorbis.js 在它的代码中有这个检查

这会覆盖导致 webpack 抛出此错误的模块

因为它试图运行

关于如何解决这个问题的任何想法？我真的不想分叉 libvorbis 并修改它的源代码。

libvorbis.js 库被编写为作为脚本包含在页面上。

我在我的 webpack 3 配置中遇到了一些树抖动的问题（也许），因为我使用了很多重新导出。我想保留再出口，但避免不必要地增加我的捆绑包大小。（另外，我还想避免在我的开发版本中使用不必要的代码）所以我想知道是否有一种方法可以通过文件“跟踪”导入并将它们替换为模块的直接路径。

代码 1：

index.js：

文件夹 1/index.js：

文件夹1/文件夹2/index.js：

所以（没有摇树，有时还有 webpack 以某种方式破坏的摇树）x 并且 y将包含在我的包中，如果我有以下 import 语句就不会发生这种情况：

代码 2

index.js：

嗯......是否可以在使用 webpack（或任何其他工具）的构建过程中从代码 1 到代码 2？

如何在 webpack 项目中添加字体？我不敢相信，在浏览了十几个 webpack 指南之后，我仍然找不到添加字体的实际解决方案。我没有使用 React，我使用的是可以在这里找到的样板：https ://github.com/sandrina-p/essential-webpack-boilerplate

文件夹结构如下：

我已将以下内容添加到我的配置文件中：

我在我的css中导入字体系列，如下所示：

我没有收到任何错误，h2 标签只是不显示字体，默认为 times new roman。任何见解都将不胜感激，我真的不想为了使用字体而不得不在 gulp 中重建我的整个项目。

我正在开发基于反应的 nextjs 应用程序。一些 npm 包使用外部 css 导入。我收到类似的错误

如何在我的 nextjs 应用程序中支持从外部包导入 css。我通过在 next.config.js 中进行更改来检查某处，它可以工作。但是我找不到合适的。如果有人可以帮助我解决这个问题，那就太好了。

我正在尝试将 css 样式表应用于我的 html 页面，并将其作为 javascript 代码中的字符串获取（我想向用户展示我的样式表）。我正在使用css-loader和style-loader。这是 webpack 配置文件的一个片段：

当我使用此配置时，样式将应用于我的 HTML 页面，但我无法在代码中将它们作为字符串获取。给console.log(style.toString())了我一个空对象[object Object]。它是空的，因为Object.keys(style)给了我[ ]。这是app.js文件：

如果我注释掉{ loader: 'style-loader'}，控制台会打印我的样式表，但样式不会应用于 HTML 页面。这是console.log(style.toString())这种情况下的输出：

有什么建议吗？

来自文档：

加载程序链按时间顺序编译。加载器链中的第一个加载器将值返回给下一个。

让我们以下面的 webpack 配置为例。

根据文档，style-loader首先运行然后将其输出通过管道传输到css-loader（由于时间顺序）。但这不是它的工作方式。实际上css-loader，首先加载样式表，然后通过管道将结果style-loader附加到 html 页面中。

如果我更改加载程序的顺序，我会在构建时收到错误：

错误：

我错过了什么？我没有正确理解时间顺序吗？

我想在 webpack 编译期间替换每个 typecrpit 中的一些代码。现在我得到了这样的东西：

我的测试加载器看起来像这样：

根据这个问题，应该为每个打字稿文件调用我的加载器（test-loader ）（确实如此）。下一个加载器（@ngtools/webpack）应该在修改过的（通过test-loader）打字稿文件上运行，但不是，为什么会这样？

我的配置：

• webpack v3.10.0
• 打字稿2.6.2
• 节点v9.4.0
• @ngtools/webpack v1.10.0-beta.3（1.6.4 的情况相同）

没有enforce: 'pre'同样的效果。我正在尝试做这样的事情，但更简单。

我正在编写一个 webpack 插件和加载器，我想创建一个通过我的插件生成的“动态”模块。

基本上，我希望我的加载器向动态模块发出导入，如下所示：

插件应该生成"./the-dynamic-module"，理想情况下，每次动态模块更改时都应该重新构建加载器。

有没有办法做到这一点？

有一个生成虚拟模块的插件，但它们是静态的。我想在编译期间生成一个动态的。

任何帮助表示赞赏！干杯。

我需要使用 webpack 将一些 javascript 文件作为纯文本导入。

所有文件都有一个特定的扩展名说：.mytype.js.

我使用以下方法为这些文件创建了一个加载器：

我已经注册了一个别名来解析我自己的加载器

目前myloader.js看起来是这样的：

对于我的开发服务器，我有以下设置：

我所有带有扩展名的文件.mytype.js都在mytypeFiles目录中。问题是当我运行它时，我从加载器中得到以下输出console.log

然而use-strict；并附加了第一个函数定义（这是我的）之后的所有内容。如何阻止此热加载程序代码预先和后固定到我的源代码？

提前致谢！

我正在尝试编写一个自定义 Webpack 加载器，它读取 JavaScript 文件并导出 SASS 变量，类似于js-to-sass-var-loader但具有一些附加功能。

/webpack-loaders/js-to-sass-loader.js

这个 JavaScript 文件加载一个 .json 配置文件，进行一些处理并吐出一个对象。

/client/sass/sassConfig.js

json 文件包含注释，所以我用另一个简单的加载器将它们剥离。这只是使用json5解析 json 文件，然后将输出字符串化并传递。

/webpack-loaders/remove-json-comments-loader.js

我的 webpack.config.babel.js 包含 sass 和 json 文件使用这两个加载器的规则。

/webpack.config.babel.js

在我的一些 JavaScript 文件中，我可以import Config from './path/to/config.json'毫无问题。它正确使用remove-json-comments-loader. 但是当我js-to-sass-loader尝试 require时sassConfig.js，Webpack 不使用加载器进行解析config.json。它尝试将其作为常规 json 文件加载，这导致它由于注释而失败。我试过使用import config from '!!remove-json-comments-loader!../../config.json';，但 webpack 说它找不到文件。

我对编写 webpack 加载器非常陌生，所以我确信这很简单。帮助？谢谢！

这是 github 存储库的链接：https ://github.com/dfoverdx/PokeStreamer-Tools/tree/9b4c7315d5dc6b30c5972a0b8678489598311bf0

要重现此问题，请打开/node/client/sass/sassConfig.js并将前四行更改为：

也就是说，注释前 3 行并取消注释第 4 行。

从/node运行npm run build到产生错误。