我试图让webpack忽略一个导入,这样它就可以通过浏览器使用原生的ES6 import语句导入,而不是webpack。我试图让ffmpeg.js直接导入,因为当它试图捆绑webpack时会崩溃,因为文件太大了。
根据这里的答案(How to exclude a module from webpack, and instead import it using es6),我在本地树中的代码为/ffmpeg/ffmpeg-mpeg. 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;
型
然后失败并返回“Uncaught Error:Cannot find module?”(实际上,该错误已硬编码在生成的文件中)
所以这似乎是假设有一个全局ffmpeg选项,然后将该模块Map到该选项,但相反,我希望它完全不受webpack的影响,并将其留给浏览器。
正确的方法是什么?在那个页面上被否决的排除规则也不起作用。
2条答案
按热度按时间n9vozmp41#
编辑:
你可以使用这个:
字符串
这将阻止webpack编译导入(因此它将是常规的ES6导入)
原始答案:
您忘记在页面中包含外部脚本。
此外,由于您指出,您的文件是非常大的,我建议将其包括在
所以你需要加上
型
添加到应用程序的头部,然后使用带有回调的导入函数导入它,
型
小提示:externals键不需要是文件的路径,它只是导入时使用的名称,因此,如果与路径混淆,请重命名它
型
或者,对于node js,您可以使用
型
请记住,这将把它转换为仅适用于node js的普通require
zf2sa74q2#
官方的方法是使用Magic Comment:
字符串
这告诉webpack将
import()
语句按原样复制到输出包。你可以使用更多神奇的注解,比如启用延迟加载(这可能会解决你的问题,同时仍然允许你使用webpack的导入)。
**如果使用TypeScript,请注意:**您的
tsconfig.json
可能会抑制webpackIgnore
。这里有两种情况需要注意:型