问题

这两天打算把之前写的浏览器扩展用 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 部分：

机器翻译：