Question

我正在使用带有webpack的默认PDFJS库，并根据本教程做了一些工作： https://github.com/mozilla/pdf.js/tree/master/examples/webpack

我尝试使用webpack将所有内容捆绑到一个模块中，但即使使用以下配置指定一个入口点...

entry: {
  'main': './src/main.ts',
  // 'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry',
},
output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.js',
}
[...]

webpack在我的/dist目录中创建了两个js文件

0.bundle.js
main.bundle.js

如果我从主代码中删除行import { PDFJS } from 'pdfjs-dist/web/pdf_viewer.js'（这是我唯一且重要的依赖项），则不再创建0.bundle.js文件，但当然我的代码不起作用更

问题

什么导致webpack将东西捆绑成两个模块，即使我不想，我怎么能避免呢？

注意：保持这种方式不是一个解决方案，因为它是一个我必须在一个平台上解决的问题，我只能有一个入口文件被授权（不要问我为什么）。

提前致谢。

Answer 1

我发现，当代码库太大时，webpack会自动创建块。虽然您可能会考虑优化您的应用，但添加以下webpack.config.js文件是完全可行的 - 甚至是可接受的。

plugins: [ new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) ],

这将强制代码捆绑成一个大的main.bundle.js文件。

真诚的（自我），

自己。

Answer 2

PDF.js有两部分：用于显示（pdf.js）和用于解析（pdf.worker.js）。显示部件通过Web Worker或<script>加载pdf.worker.js。（后者禁用worker，这可能导致解析在主线程上运行并导致UI锁定/ jank）。

在Webpack上下文中，pdf.js包含在主bundle中，pdf.worker.js被编译为worker和附加bundle以替换script-tag-loading（请参阅https://webpack.js.org/guides/code-splitting/）。通过删除后一个bundle，您可以杀死pdf.worker.js部分（负责解析）。通过将它添加到主包中，您将增加主包的大小，从而增加页面初始加载时间（或将主线程风险暴露）。

Webpack如何将0.bundle与主捆绑（PDFJS）结合起来

2 个答案: