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

问题描述

我正在将主要使用 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”将脚本从前端（通常是“src”）整体传输到dist 目录。

这与规定的 Webpack 延迟加载方法不同，因为这些脚本在 index.js 的外部，而不是 index.js 的组成部分。

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

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

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

那么问题来了：

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

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

迄今为止的总结

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

使用诸如 d3.js 之类的库的脚本注入被简单地保留为未转译。是否有一些“强制”的方法——转换它们？

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

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

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

标签： webpackpluginslazy-loading

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

问题描述

解决方案

推荐阅读