Webpack 2:构建多部分库并用作外部库

Question

我正在使用 Webpack 2 并试图捆绑一个将在我公司的几个项目中使用的通用库。依赖关系包括 vue、vue-router 和其他一些。将这些供应商依赖项打包到一个通用文件中，然后将其作为各种项目的外部文件包含在内似乎是有意义的。但是，我似乎无法使其正常工作。

我的库 webpack.config.js 包括以下行：

entry: {
    common: [
        'vue',
        'vue-router'
    ]
}
...
output: {
    filename: '[name].js',
    libraryTarget: 'var'
}

我的消费项目的 webpack.config.js 包括：

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter'
}

我尝试将output.library设置为common通用，并将外部设置为例如['common','Vue']。这行不通。

我尝试在库和消费者上都设置libraryTarget以"amd"，这只会导致define未定义。如果我使用 "var" ，只有当我只包装一个库时，事情才会起作用 common ，如果我包装多个库，那么两者都是未定义的。

我正在尝试做的事情可能吗？谢谢。

Answer 1

据我了解，您需要使用外部(如上所述(，仅此而已。

然后你可以以"es5 way"获取外部依赖项作为脚本标签(例如 https://unpkg.com/vue@2.2.6/dist/vue.runtime.min.js(或从 npm 获取并使用它。或者如果需要，将其保存到 *.js 文件中。

Webpack 创建捆绑包可以从模块(例如 es 2015(或全局变量 (es5( 获取依赖项。

因此，npm 中已经存在外部库的捆绑包。