问题
这两天打算把之前写的浏览器扩展用 Preact 重构一下，用到了动态导入语法。
用之前的 Webpack 配置构建后发现，和 content-script.js 一起生成的还有几个以数字开头的 JS 文件，
分析后发现 content-script.js 引用了这几个文件，而且里面大多是 React 和组件。
但是由于浏览器扩展的限制，在 content-script 导入时用的路径是网页的路径，不是扩展的路径，所以会导入失败。
因此经过权衡后决定找到一个方法把 content-script 打包成一个文件。
解决方案
在动态导入的地方插入一句注释 /* webpackMode: "eager" */。
const app = await import(/* webpackMode: "eager" */ './components/App')
具体的文档在这里 https://webpack.js.org/api/module-methods/#magic-comments 。
下面是我截图的 webpackMode 部分：
机器翻译：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。