Update the webpack example to account for outputting of JavaScript modules (PR 17055 follow-up)

*Please note:* While following the steps in the README still works with this patch, in the sense that the example runs and successfully renders a PDF document, I unfortunately cannot tell if it illustrates Webpack best practices.

examples/webpack/README.md

@@ -31,5 +31,3 @@ importing `pdfjs-dist/webpack` which is the zero-configuration method for
 Webpack users. Installing `worker-loader` is no longer necessary.
 
     import * as pdfjsLib from 'pdfjs-dist/webpack';
-
-For a full working example refer to [this repository](https://github.com/yurydelendik/pdfjs-react).

examples/webpack/main.js

@@ -1,37 +0,0 @@
-// Any copyright is dedicated to the Public Domain.
-// http://creativecommons.org/licenses/publicdomain/
-
-/* eslint-disable import/no-commonjs */
-
-// Hello world example for webpack.
-
-const pdfjsLib = require("pdfjs-dist");
-
-const pdfPath = "../learning/helloworld.pdf";
-
-// Setting worker path to worker bundle.
-pdfjsLib.GlobalWorkerOptions.workerSrc =
-  "../../build/webpack/pdf.worker.bundle.js";
-
-// Loading a document.
-const loadingTask = pdfjsLib.getDocument(pdfPath);
-loadingTask.promise
-  .then(function (pdfDocument) {
-    // Request a first page
-    return pdfDocument.getPage(1).then(function (pdfPage) {
-      // Display page on the existing canvas with 100% scale.
-      const viewport = pdfPage.getViewport({ scale: 1.0 });
-      const canvas = document.getElementById("theCanvas");
-      canvas.width = viewport.width;
-      canvas.height = viewport.height;
-      const ctx = canvas.getContext("2d");
-      const renderTask = pdfPage.render({
-        canvasContext: ctx,
-        viewport,
-      });
-      return renderTask.promise;
-    });
-  })
-  .catch(function (reason) {
-    console.error("Error: " + reason);
-  });

examples/webpack/main.mjs

@@ -0,0 +1,29 @@
+// Any copyright is dedicated to the Public Domain.
+// http://creativecommons.org/licenses/publicdomain/
+
+// Hello world example for webpack.
+
+import * as pdfjsLib from "pdfjs-dist";
+
+const pdfPath = "../learning/helloworld.pdf";
+
+// Setting worker path to worker bundle.
+pdfjsLib.GlobalWorkerOptions.workerSrc =
+  "../../build/webpack/pdf.worker.bundle.js";
+
+// Loading a document.
+const loadingTask = pdfjsLib.getDocument(pdfPath);
+const pdfDocument = await loadingTask.promise;
+// Request a first page
+const pdfPage = await pdfDocument.getPage(1);
+// Display page on the existing canvas with 100% scale.
+const viewport = pdfPage.getViewport({ scale: 1.0 });
+const canvas = document.getElementById("theCanvas");
+canvas.width = viewport.width;
+canvas.height = viewport.height;
+const ctx = canvas.getContext("2d");
+const renderTask = pdfPage.render({
+  canvasContext: ctx,
+  viewport,
+});
+await renderTask.promise;

examples/webpack/package.json

@@ -1,12 +1,12 @@
 {
   "name": "webpack-pdf.js-example",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "scripts": {
     "build": "webpack"
   },
   "devDependencies": {
-    "webpack": "^5.11.1",
-    "webpack-cli": "^4.3.1",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
     "pdfjs-dist": "../../node_modules/pdfjs-dist"
   }
 }

examples/webpack/webpack.config.js

@@ -6,8 +6,8 @@ const path = require("path");
 module.exports = {
   context: __dirname,
   entry: {
-    main: "./main.js",
-    "pdf.worker": "pdfjs-dist/build/pdf.worker.entry",
+    main: "./main.mjs",
+    "pdf.worker": "pdfjs-dist/build/pdf.worker.mjs",
   },
   mode: "none",
   output: {