Externalize pdf.js in an npm module with webpack

1
votes

I'm currently building some kind of UI Component library on top of vue.js and vuetify. One component is some pdf viewer, which uses pdf.js to render the pdf. All external libraries hould be excluded from the bundle and will be instead installed in the "consuming" project.

I'm loading pdfjs like this in my SFC: 

import pdfJs from 'pdfjs-dist/webpack'

function getDocument(url) {
  return pdfJs.getDocument(url).promise
}

To build the npm module I've setup the project using vue-cli and changed the webpack config in vue.config.js like this: 

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')
      }
    }
  }
}

For all the listed libraries like vuetify, lodash and axios the externalization works without problems. Only pdf.js and its pdf.worker.js still appears in the bundle. How can I externalize pdf.js from the bundle?

1
vue.jswebpackvue-clipdf.js

1 Answers

0
votes

WebpackConfig:

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