webpack - webpack 中动态导入文本文件

Question

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

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

let data = (await import(/* webpackChunkName: "a.txt" */"./a.txt")).default;
console.log(a.default) 

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

(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{37:function(e,n){e.exports='CONTENT_OF_TXT_FILE'}}]);

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 。

标签： webpackdynamic-importraw-loader