Upgrade to Webpack 4

examples/webpack/README.md

@@ -4,16 +4,16 @@ Example to demonstrate PDF.js library usage with Webpack.
 
 ## Getting started
 
-Build project and install the example dependencies:
+Install the example dependencies and build the project:
 
     $ gulp dist-install
     $ cd examples/webpack
     $ npm install
+    $ ./node_modules/webpack/bin/webpack.js
 
-To build Webpack bundles, run `node_modules/.bin/webpack`. If you are running
-a web server, you can observe the build results at
-http://localhost:8888/examples/webpack/index.html
+You can observe the build results by running `gulp server` and navigating to
+http://localhost:8888/examples/webpack/index.html.
 
-See main.js and webpack.config.js files. Please notice that PDF.js
-packaging requires packaging of the main application and PDF.js worker code,
-and the `workerSrc` path shall be set to the latter file.
+Refer to the `main.js` and `webpack.config.js` files for the source code.
+Note that PDF.js packaging requires packaging of the main application and
+the worker code, and the `workerSrc` path shall be set to the latter file.

examples/webpack/package.json

@@ -5,7 +5,8 @@
     "build": "webpack"
   },
   "devDependencies": {
-    "webpack": "~1.12.9",
+    "webpack": "^4.10.2",
+    "webpack-cli": "^2.1.4",
     "pdfjs-dist": "../../node_modules/pdfjs-dist"
   }
 }

examples/webpack/webpack.config.js

@@ -7,17 +7,10 @@ module.exports = {
     'main': './main.js',
     'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry'
   },
+  mode: 'none',
   output: {
     path: path.join(__dirname, '../../build/webpack'),
     publicPath: '../../build/webpack/',
     filename: '[name].bundle.js'
-  },
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: {
-        screw_ie8: true,
-        warnings: false
   }
-    })
-  ]
 };

external/webpack/pdfjsdev-loader.js

@@ -27,7 +27,7 @@ module.exports = function (source) {
   this.cacheable();
 
   var filePath = this.resourcePath;
-  var context = this.options.context;
+  var context = this.rootContext;
   var sourcePath = path.relative(context, filePath).split(path.sep).join('/');
 
   var ctx = Object.create(this.query);

gulpfile.js

@@ -146,8 +146,15 @@ function createWebpackConfig(defines, output) {
   var skipBabel = bundleDefines.SKIP_BABEL ||
                   process.env['SKIP_BABEL'] === 'true';
 
+  // Required to expose e.g., the `window` object.
+  output.globalObject = 'this';
+
   return {
+    mode: 'none',
     output: output,
+    performance: {
+      hints: false, // Disable messages about larger file sizes.
+    },
     plugins: [
       new webpack2.BannerPlugin({ banner: licenseHeaderLibre, raw: true, }),
     ],
@@ -160,7 +167,7 @@ function createWebpackConfig(defines, output) {
     },
     devtool: enableSourceMaps ? 'source-map' : undefined,
     module: {
-      loaders: [
+      rules: [
         {
           loader: 'babel-loader',
           // babel is too slow
@@ -1166,10 +1173,10 @@ gulp.task('dist-pre', ['generic', 'components', 'lib', 'minified'], function() {
     license: DIST_LICENSE,
     dependencies: {
       'node-ensure': '^0.0.0', // shim for node for require.ensure
-      'worker-loader': '^1.1.1', // used in external/dist/webpack.json
+      'worker-loader': '^2.0.0', // used in external/dist/webpack.json
     },
     peerDependencies: {
-      'webpack': '^2.0.0 || ^3.0.0', // peerDependency of 'worker-loader'
+      'webpack': '^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0', // from 'worker-loader'
     },
     browser: {
       'fs': false,

package.json

@@ -35,7 +35,7 @@
     "uglify-es": "^3.3.9",
     "vinyl": "^2.1.0",
     "vinyl-fs": "^3.0.3",
-    "webpack": "^3.12.0",
+    "webpack": "^4.10.2",
     "webpack-stream": "^4.0.3",
     "wintersmith": "^2.4.1",
     "yargs": "^11.0.0"