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": "^5.89.0",
-    "webpack-cli": "^4.3.1",
+    "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",
+    main: "./main.mjs",
-    "pdf.worker": "pdfjs-dist/build/pdf.worker.entry",
+    "pdf.worker": "pdfjs-dist/build/pdf.worker.mjs",
   },
   mode: "none",
   output: {

gulpfile.mjs

@@ -61,7 +61,6 @@ const MINIFIED_DIR = BUILD_DIR + "minified/";
 const MINIFIED_LEGACY_DIR = BUILD_DIR + "minified-legacy/";
 const JSDOC_BUILD_DIR = BUILD_DIR + "jsdoc/";
 const GH_PAGES_DIR = BUILD_DIR + "gh-pages/";
-const SRC_DIR = "src/";
 const DIST_DIR = BUILD_DIR + "dist/";
 const TYPES_DIR = BUILD_DIR + "types/";
 const TMP_DIR = BUILD_DIR + "tmp/";
@@ -1829,7 +1828,6 @@ gulp.task(
           .src([
             GENERIC_DIR + "build/pdf.mjs",
             GENERIC_DIR + "build/pdf.worker.mjs",
-            SRC_DIR + "pdf.worker.entry.js",
           ])
           .pipe(gulp.dest(TYPESTEST_DIR + "build/")),
         gulp
@@ -2207,14 +2205,12 @@ gulp.task(
           .src([
             GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs",
             GENERIC_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map",
-            SRC_DIR + "pdf.worker.entry.js",
           ])
           .pipe(gulp.dest(DIST_DIR + "build/")),
         gulp
           .src([
             GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs",
             GENERIC_LEGACY_DIR + "build/{pdf,pdf.worker,pdf.sandbox}.mjs.map",
-            SRC_DIR + "pdf.worker.entry.js",
           ])
           .pipe(gulp.dest(DIST_DIR + "legacy/build/")),
         gulp

src/pdf.worker.entry.js

@@ -1,21 +0,0 @@
-/* Copyright 2022 Mozilla Foundation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/* globals require:readonly */
-/* eslint-disable import/no-commonjs */
-
-(typeof window !== "undefined"
-  ? window
-  : {}
-).pdfjsWorker = require("./pdf.worker.mjs");