问题标签 [raw-loader]

我想在我的 react js 项目中使用raw-loader 。我正在使用react-app-rewired库和 config-overrides.js。

当我导入文件时，我希望收到它的内容。相反，我收到了文件的路径。

我正在使用命令 "start": "react-app-rewired start --scripts-version react-scripts"

编译中没有错误，但是 prop 被设置为/static/media/toolbox.xml.93a6d25d.raw而不是文件的期望内容。

谢谢！

我正在使用带有导出 webpack 的 angular 6 和 angular cli 1.7，要求是使用 amd 模块并将 html 导入到组件中。

如果我执行“npm start”，我会在终端出现异常

我开始查看 webpack 加载器并查看我使用的一篇文章

这帮助我编译，但应用程序会出错。所以在开发工具中，我看到了类似的日志

我不知道现在该怎么做:(我如何仍然使用像'text！./app.component.html'这样的导入并且仍然能够编译和运行。

请帮忙。

在 module.d.ts 我有

我有一个 webgl proyect，如果我从我的 main.js 硬编码它们，我可以加载我的着色器

另外，如果将它们保存在单独的 JS 文件中，我可以这样做：

我的 vertexShader.js 在哪里：

然而！实际上我想要做的是从纯文本文件（.txt、.frag 或其他文件）中获取着色器，并使这个导入在我的脚本中工作：

任何一个：

或者：

我研究了这个话题，我已经做了

并完成了我的 webpack 配置文件：

但是对于我尝试的每个文件扩展名，我都会收到这两个错误。

对于 .frag：

加载模块脚本失败：服务器以“application/octet-stream”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。[ http://localhost:3000/src/main.frag]

对于 .txt：

加载模块脚本失败：服务器以“text/plain”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。[ http://localhost:3000/src/frag.txt]

还有我的html代码：

非常感谢任何帮助

我有一个名为“Logs”的 Vue 组件，用于监控日志文件中的更改；这是为了防止手动检查文件。

所述日志文件被正确命名为 log.txt 并且它加载在我的站点中的某个位置。

第一个挑战实际上是在我的组件中读取原始加载来拯救的文件。请参阅下面的相同代码：

上面的代码是不言自明的；在安装组件的位置，getLogs调用方法并读取文件并适当地设置变量。当我在模板中获得所需的输出时，这工作得很好。

我现在的困境是我希望能够更新实际的 log.txt 文件（我现在手动编辑它，但会自动进行），当我点击一个按钮时，会看到更新的值。

我尝试过的

1. 在模板中创建一个调用 this.getLog 的按钮...但是当我单击它时，它会加载完全相同的数据而无需更新

2. 我也尝试过按需导入文件

   /li>

好吧，这也行不通。刷新后，我看到了对文件的更新。

我认为解决方案是以某种方式按需加载文件，但我不知道如何操作。

所以百万美元的问题是如何使用 Vue js/javascript 和 raw-loader 来实现这一点。在此先感谢您的帮助

通常当我们需要导入一些我们使用的原始字符串时raw-loader。常见的用例如下：

1. 在源代码中我们添加：

2. 将生成a.txt.js包含以下内容的文件：

3. 我们导入的源代码将生成将添加<script charset="utf-8" src="/a.txt.js"></script>到 HTML HEAD 部分的内容。

4. 在浏览器评估这两个脚本之后，webpack 的魔法会让它看起来像 es6 导入。

很好，这就是 es6 导入通常的样子。raw-loader 看起来像一个带有动态导入的 hack。但是是否只复制a.txt到目标目录而不是使其成为es6模块？我想要一个优雅的解决方案，无需使用 XmlHttlRequest 编写一些讨厌的包装器。webpack中有这样的插件吗？

还有一些其他类似的工具：

• file-loader- 将文件复制到 dist 目录并返回文件名。这东西仍然需要一些包装器，而且看起来不像 es6-module 那样优雅。
• html-loadersrc- 通过解析和查找属性仅支持 html 。

我试图import通过将它们作为字符串包含一些 WebGL 顶点和片段着色器。

我有一个这样的项目结构：

shad.d.ts

脚

tsconfig.json

webpack.config.js

当我npx webpack，我得到：

此外，src/shad/目录中不存在该文件夹及其内容built/。

我一直在 TypeScript 和 Webpack 的所有文档中四处游荡，以及这里的许多其他答案。从我读过的大部分内容来看，它的存在和内容shad.d.ts应该足以解决这个问题，但它并没有——我什至不知道如何找出原因。

这是怎么回事？使用 TypeScript 在 Webpack 中导入原始文件需要做什么？（或者至少，我能做些什么来弄清楚为什么没有找到这个？）

raw-loader尝试要求任何.md文件时出错。

添加原始加载器以导入降价文件：

在.js文件中，需要降价文件..

markdown 文件的路径是相对路径：/posts/awards.md

如果我改变awards.md它的awards.json工作原理。所以也许这是raw-loader寻找一个export而awards.md不是找到一个的问题，因此出错了？指示WebpackesModule: false不将其视为模块的目的不是吗？

当我这样做时require("!!raw-loader!themes/builtin_themes/default/layout.json")，我收到以下错误：

我们确实有这样配置的 json 加载器：

但我的理解是“！！” 前面将禁用任何已配置的加载程序。

如果可能的话，我想单独保留 webpack 配置，只需更改 require 语句以使其工作。

我正在为自定义元素编写一个装饰器，主要代码是：

我现在raw-loader用来加载 html 模板，但这还不够优雅，我想像 Angular：

但我不能在装饰器中使用 require 或 import ，错误消息如下：

angular-cli 里面有什么魔力？我尽力了，谢谢你的帮助！

我正在尝试将一些 SCSS 导入到 Javascript 文件中，结果好坏参半。我发现这有效：

样式.styleString.scss

index.js

index.style.scss被正确编译为文件并style.stringStyle.scss在控制台中正确打印。

我想做的是将此加载器管道移动到我的 webpack 配置中。这就是我目前所拥有的：

index.js

使用此配置，一个空字符串会打印到控制台（index.style.scss仍然正确呈现到文件）。

我在这里做错了什么？我的印象是!在导入中使用内联语法就像在配置文件中排列加载器一样，但我显然遗漏了一些东西。

是否可以在我的 Webpack 配置中将 SCSS 文件加载为 CSS 字符串？