在 Webpack 和 TypeScript 项目中使用 Dynamic Import 但只打包成一个 JS 文件的方法

问题

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

部分文档

机器翻译:

翻译

posted on 2021-04-07 21:44  梁峰宁  阅读(13)  评论(0编辑  收藏