Webpack如何不打包指定库减小体积？pdfjs-dist配置externals无效怎么解决

云上老周

2026-10-1

可行的解决方案如下：

你之前配置的externals不生效的核心原因是"pdfjs-dist": ''的写法不符合webpack规则，webpack不会将值为空字符串的依赖识别为需要排除的外部依赖，因此仍然会将pdfjs-dist打包进产物。

方案1：使用webpack.IgnorePlugin（最适配你的场景）
如果你已经完全停用了所有依赖pdfjs-dist的功能，直接用IgnorePlugin拦截所有对该库的引入即可，配置如下：

const webpack = require('webpack');

module.exports = {
  // 其余webpack配置保持不变
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^pdfjs-dist$/
    })
  ]
}

如果子依赖中存在对pdfjs-dist子路径的引入（比如import 'pdfjs-dist/build/pdf.min.js'），可以调整正则匹配范围：

new webpack.IgnorePlugin({
  resourceRegExp: /^pdfjs-dist(\/.*)?$/
})

方案2：修正externals配置
如果要使用externals实现排除，需要配置可被webpack识别的外部依赖值，同时支持匹配所有子路径引入的写法如下：

module.exports = {
  // 其余webpack配置保持不变
  externals: [
    function(context, request, callback) {
      // 匹配所有pdfjs-dist相关的引入
      if (request.startsWith('pdfjs-dist')) {
        // 告诉webpack该依赖对应全局空对象，不需要打包
        return callback(null, '{}');
      }
      callback();
    }
  ]
}

方案3：路径 alias 重定向到空模块
你也可以新建一个内容为空的empty.js文件，通过resolve.alias将所有pdfjs-dist的引入指向这个空文件，也能达到不打包原库的效果：

const path = require('path');

module.exports = {
  // 其余webpack配置保持不变
  resolve: {
    alias: {
      'pdfjs-dist': path.resolve(__dirname, './empty.js')
    }
  }
}