Webpack 动态导入网页中的文本文件

通常，当我们需要导入一些原始字符串时，我们使用

raw loader

。常见用例如下所示：

在源代码中，我们添加了：

将生成包含以下内容的文件

a.txt.js

：

我们导入的源代码将生成一些东西，这些东西将添加到HTML标题部分的

浏览器评估两个脚本后，webpack魔术会使其看起来像es6导入

很好，这就是es6导入的典型外观。原始加载程序看起来像是一个动态导入的黑客但是是否只需将

a.txt

复制到目标目录，而不是将其作为

es6

模块？我想要一个优雅的解决方案，不需要使用XmlHttlRequest编写一些讨厌的包装。网页包里有这样的插件吗

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

• 文件加载器

  -将文件复制到dist目录并返回文件名。这个东西仍然需要一些包装，看起来不像es6模块那么优雅

• html加载程序

  -通过解析html并查找

  src

  属性，仅支持html

  ---

以下是您可以做到的方法：

从代码中完全删除.txt导入。 这意味着不要在入口点依赖关系树中使用：

import/import（）/require（）/url（..）/@import

用于将.txt复制到dist文件夹。例如：

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

---

进一步澄清：webpack不会将

fetch

关键字解析为导入调用。它保持输出包中的状态。与常规模块不同，他激活加载程序/插件使其成为.js moude，并将其作为函数调用插入块模块映射，如下所示：

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

，（功能（模块、网页包导出、网页包要求）{
module.exports=
}，\u\u下一个\u模块\u在\u包中__

我知道这种方法。顺便说一句，没有必要在Webpack.CopyPlugin中使用硬核源名称，您可以在源代码中使用require，并使用我在问题中已经描述过的文件加载器插件。如果您不通过Webpack loaders链传递内容，您将遇到缓存等问题。此外，Webpack dev服务器不会自动在修改源代码时灵活地重新加载页面。还有更多的警告。这样我肯定会避免最严重的问题。

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

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

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

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