如何让 webpack“实际上”忽略外部并依赖浏览器导入？

我试图让 webpack 忽略导入，以便浏览器使用本机 ES6 import 语句而不是 webpack 导入它。我试图让 ffmpeg.js 直接导入，因为它在尝试捆绑 webpack 时崩溃，因为文件太大。

按照这里的答案（如何从 webpack 中排除模块，并使用 es6 导入它 https://stackoverflow.com/questions/52507232/how-to-exclude-a-module-from-webpack-and-instead-import-it-using-es6），我的代码在本地树中为 /ffmpeg/ffmpeg-mpeg.js 并验证了我的开发服务器可以访问为http://localhost:8080/ffmpeg/ffmpeg-webm.js http://localhost:8080/ffmpeg/ffmpeg-webm.js

然后我通过以下方式导入：

  import ffmpeg from '/ffmpeg/ffmpeg-webm.js';

并将其添加到我的 webpack 配置的外部部分：

  externals: {
    '/ffmpeg/ffmpeg-webm.js': 'ffmpeg',
  },

结果是一个看起来像这样的链接

webpack:///external "ffmpeg"

包含：

module.exports = ffmpeg;

然后失败并显示“未捕获错误：找不到模块？” （事实上​​，该错误已硬编码在生成的文件中）

因此，这似乎假设有一个全局 ffmpeg 选项，然后将该模块映射到该选项，但我希望它让该行完全不受 webpack 影响，并将其留给浏览器。

正确的方法是什么？该页面上被否决的排除规则也不起作用。

Edit:

你可以使用这个：

import(/* webpackIgnore: true */'/ffmpeg/ffmpeg-webm.js').then(({default: ffmpeg}) => {
  //Do what you want to do with ffmpeg
});

这将阻止 webpack 编译导入（因此它将是常规的 ES6 导入）

原答案：

您忘记在页面中包含外部脚本。

另外，由于您指出您的文件非常大，我建议将其延迟包含

所以你需要添加

<script src="/ffmpeg/ffmpeg-webm.js" defer></script>

到应用程序的头部，然后您将使用带有回调的导入函数稍微不同地导入它

import('/ffmpeg/ffmpeg-webm.js').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

小注意事项：externals key 不需要是文件的路径，它只是导入时使用的名称，因此如果您对路径感到困惑，请重命名它

module.export = {
  //...
  externals: {
    "ffmpeg-webm": "ffmpeg"
  }
}
//Then import
import('ffmpeg-webm').then(ffmpeg => {
  //Do what you want to do with ffmpeg
});

或者对于 Node js，您可以使用而不是使用外部

const ffmpeg = __non_webpack_require__('/ffmpeg/ffmpeg-webm.js')

请记住，这会将其转换为仅适用于 Node js 的正常需求