自定义 Webpack Target

问题

由于浏览器扩展有特殊的权限限制，许多前端的开发工具都无法直接派上用场，如之前我解决了热更新和分块自动填写到清单的问题。现在我们继续突破下个影响性能的问题：动态加载分块。

Webpack 支持 import() 自动分块并异步加载，这对于大型应用来说是非常有用的功能。虽然浏览器扩展的源文件都在本地，但对于大型应用来说静态加载依然会浪费了不少内存。那么为什么浏览器扩展不支持异步加载呢？这就需要理解 Webpack 是怎么处理的。

（如果只关心如何在浏览器扩展中使用，本文的内容已封装为 webpack-target-webextension 库。）

JSONP

当我们指定（或默认） Webpack Target 为 web 的时候，Webpack runtime 会以 JSONP 方式来加载异步块。那么什么是 JSONP？

JSONP 常用于跨域动态获取数据。如 a.com 向 b.com 请求数据，

• 首先生成一个回调函数名，如 myCallback；
• 创建全局函数 myCallback 实现加载数据的逻辑；
• 以 myCallback 作为参数构造请求链接，如 https://b.com/data?callback=myCallback；
• 通过支持跨域的 ；
• 服务器将数据包裹到回调中返回， myCallback(...)；
• 浏览器加载脚本，myCallback 的逻辑被执行。

沙箱

这种方式为什么在浏览器扩展中会失效呢？我们都知道一些浏览器扩展可以对用户的网页进行修改，如美化或者去广告。这些修改是通过一种叫 content script 类型的脚本实现。每个 content script 可以在作者指定的时机被植入到页面上。虽然 content script 可以修改 DOM，但是 content script 本身是运行在隔离的沙箱环境中的。这个环境可以让 content script 访问部分浏览器扩展 API。

所以当 Webpack 以 JSONP 方式加载异步块的时候，