标签：文件 TypeScript script webpackMode Dynamic JS content 导入 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 部分：

机器翻译：

标签：文件,TypeScript,script,webpackMode,Dynamic,JS,content,导入,js
来源： https://www.cnblogs.com/liangfengning/p/14629766.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。