小编Jör*_*ter的帖子

我想分享如何捆绑一个充当插件主机的应用程序以及如何动态加载已安装的插件.

1. 应用程序和插件都与Webpack捆绑在一起
2. 应用程序和插件是独立编译和分发的.

网上有几个人正在寻找这个问题的解决方案:

• 多项目构建和使用webpack动态加载模块
• 在运行时加载预构建的webpack包
• 如何从Webpack bundle中公开对象并将外部lib注入编译的bundle？
• 动态需要
  https://github.com/webpack/webpack/issues/118

这里描述的解决方案基于@ sokra 2014年4月17日关于Webpack问题#118的评论,并稍微调整以适应Webpack 2. https://github.com/webpack/webpack/issues/118

要点:

• 插件需要一个ID(或"URI"),它在后端服务器上注册,并且对应用程序是唯一的.

• 为了避免每个插件的块/模块ID冲突,JSONP将使用单独的加载器函数来加载插件的块.

• 加载插件是由动态创建的<script>元素(而不是require())启动的,让主应用程序最终通过JSONP回调消耗插件的导出.

注意:您可能会发现Webpack的"JSONP"措辞具有误导性,因为实际上没有JSON转移,但插件的Javascript包含在"加载器功能"中.服务器端没有填充.

构建一个插件

插件的构建配置使用Webpack output.library和output.libraryTarget选项.

示例插件配置:

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/' + pluginUri + '/',
    filename: 'js/[name].js',
    library: pluginIdent,
    libraryTarget: 'jsonp'
  },
  ...
}

插件开发人员可以为插件选择一个唯一的ID(或"URI"),并使其在插件配置中可用.在这里我使用变量pluginURI:

// unique plugin ID (using dots for namespacing)
var …