Webpack：使用 copy-webpack-plugin 将资产转译到 dist 目录

Question

我正在将主要使用 d3.js 构建的 SPA 集成到 Webpack 中。我正在使用 Babel 进行编译，并使用所有内容的最新版本..

在集成之前，d3.js 允许我（事件驱动）将脚本动态地、完全可重用、递归地注入到提供的 html 文件中。我唯一需要提供的是基础 JSON 文件。

例如（仅供参考，对理解问题并不重要），用于构建菜单的 javascript 文件：

case "js":
  files_to_attach
  .insert("script") // --> inject into html file
  .attr("src", function() {
    return "frontend/" + filetype + "/" + menu_group + "/" + menu + "/" + filename + "." + filetype;
  })
  .attr("type", "text/javascript") // Also tried using type "module" here
  .attr("class", menu)
  .attr("id", menu_item);
break;

这种方法用于所有加载的资产。

Webpack 有自己的动态加载机制，但我选择（通过导入所有外部脚本，然后根据需要，从它们分配的常量名称中选择）坚持上述做法，再次将它们直接注入 dist/ index.html 文件。

我这样做是为了让这些加载操作在未来可以轻松转换为数据库调用。

为了让这一切发生，我必须使用“copy- webpack-plugin'。

这与 prescribed Webpack lazy loading 方法的不同之处在于，这些脚本是 index.js 的外部文件，而不是 index.js 的组成部分。

问题？这些文件仍然包含未编译的导入语句，引发以下情况：

SyntaxError: import declarations may only appear at top level of a module

不用说，这些导入语句位于每个模块的开头。

那么问题是：

鉴于脚本已正确注入到最终的 html 中，我如何确保它们也被（预或后）转译？

配置简单，问题笼统，所以显示更多代码似乎是多余的。我想可能有几种方法可以解决这个问题。

迄今为止的总结

Webpack 无情地阻止所有对非“import”或“require”样式的文件系统访问的尝试，但 import 和 require 都不能返回对文件的直接引用（与文件的内容相反）。因此，不能利用 import 语句（do 导致转译）将脚本注入 HTML。

使用诸如 d3.js 之类的库的脚本注入不会被转译。是否有一些“强制”转换它们的方法？

唯一记录在案的脚本注入方式是有效静态的，使用多个入口点。此外，似乎不存在可以帮助动态脚本注入的插件。 （我找到的最接近解决方案的是inject-html-webpack-plugin，但该插件的文档非常简洁，没有使用所谓的“转换器”的示例）。

真正动态的、转译脚本注入 HTML 似乎在所有方面都被阻止了。

没有使用 copy-webpack-plugin 复制的文件被转译，但是我看到提到 here 的一个曲折的解决方法（“将文件从 src 文件复制到模块中，处理它们，然后移动生成/处理的文件")。

Answer 1

copy-webpack-plugin 实际上是一个fs.move 命令。由于某些插件比加载器先运行，特别是在这种情况下，它们不会被转译。

为此，您必须将外部文件添加为新入口点，最后将在此处生成和创建源代码，您也可以将它们添加到索引中