外部化pdf.js在带有webpack的npm模块中

Question

我目前正在vue之上构建某种UI组件库.js和vuetify。一个组件是一些pdf查看器，它使用pdf.js来呈现pdf。所有外部库都将从捆绑包中排除，而是安装在"消费"项目中。

我正在我的SFC中加载这样的pdfjs：

import pdfJs from 'pdfjs-dist/webpack'
function getDocument(url) {
return pdfJs.getDocument(url).promise
}

为了构建 npm 模块，我使用 vue-cli 设置了项目，并在vue.config.js中更改了 webpack 配置，如下所示：

module.exports = {
configureWebpack: {
resolve: {
symlinks: false
}
},
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.externals({
vuetify: 'vuetify',
lodash: 'lodash',
axios: 'axios',
pdfJs: 'pdfjs-dist/webpack'
})
}
},
css: {
loaderOptions: {
sass: {
implementation: require('sass')
}
}
}
}

对于所有列出的库，如 vuetify、lodash 和 axios，外部化工作没有问题。只有 pdf.js 及其 pdf.worker.js 仍然出现在捆绑包中。如何从捆绑包中外部化 pdf.js？

Answer 1

WebpackConfig：

{
optimization: {
splitChunks: {
cacheGroups: {
pdf: {
name: `chunk-pdf`,
test: /[\/]pdfjs-dist[\/]/,
chunks: 'initial'
}
}
}
}
}