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

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

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

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

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

Answer 1

以下是您的操作方法：

1. 从您的代码中完全删除 a.txt 导入。 这意味着不要在入口点依赖树中使用： import/import()/require()/url(..)/@import 。
2. 使用copy-webpack-plugin将 a.txt 复制到 dist 文件夹。 像这样，例如：

    plugins: [
        new CopyPlugin([
          {
              from: './src/a.txt',
              to: './'
          }])
      ]

3. 实现您自己的自定义原始调用以带来 a.txt，例如：

fetch('./a.txt')
    .then(r => r.text())
    .then(console.log)

---

进一步说明： webpack 不会将fetch关键字解析为导入调用。 它保留在输出包中的状态。 与常规模块不同，他激活加载器/插件以使它们成为 a.js 模块并将它们作为 function 调用插入到块模块 map 中，如下所示：

,(function(module, __webpack_exports__, __webpack_require__) {
    module.exports = <module_code>
}, __next_module_in_bundle__