Upgrade to Webpack 4

examples/webpack/config.js

@@ -1,10 +1,7 @@
-const MinifyPlugin = require('babel-minify-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const ExampleBuilder = require('./example-builder');
 const fs = require('fs');
-const merge = require('webpack-merge');
 const path = require('path');
-const webpack = require('webpack');
 
 const src = path.join(__dirname, '..');
 
@@ -17,15 +14,17 @@ examples.forEach(example => {
   entry[example] = `./${example}.js`;
 });
 
-const main = {
+module.exports = {
   context: src,
   target: 'web',
   entry: entry,
-  plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'common',
+  optimization: {
+    splitChunks: {
+      name: 'common', // TODO: figure out why this isn't working
       minChunks: 2
-    }),
+    }
+  },
+  plugins: [
     new ExampleBuilder({
       templates: path.join(__dirname, '..', 'templates'),
       common: 'common'
@@ -38,45 +37,10 @@ const main = {
       {from: 'index.html', to: 'index.html'}
     ])
   ],
+  // TODO: figure out why this hangs
+  // devtool: 'source-map',
   output: {
     filename: '[name].js',
     path: path.join(__dirname, '..', '..', 'build', 'examples')
   }
 };
-
-// configuration specific to the dev environment
-const dev = {
-  devtool: 'source-map',
-  plugins: [
-    new webpack.EnvironmentPlugin(
-      Object.assign({NODE_ENV: 'development'}, process.env)
-    )
-  ]
-};
-
-// configuration specific to the prod environment
-const prod = {
-  plugins: [
-    new webpack.EnvironmentPlugin(
-      Object.assign({NODE_ENV: 'production'}, process.env)
-    ),
-    new MinifyPlugin()
-  ]
-};
-
-
-module.exports = env => {
-  let config;
-
-  switch (env) {
-    case 'prod': {
-      config = merge(main, prod);
-      break;
-    }
-    default: {
-      config = merge(main, dev);
-    }
-  }
-
-  return config;
-};

examples/webpack/example-builder.js

@@ -5,6 +5,7 @@ const marked = require('marked');
 const path = require('path');
 const pkg = require('../../package.json');
 const promisify = require('util').promisify;
+const RawSource = require('webpack-sources').RawSource;
 
 const readFile = promisify(fs.readFile);
 const isCssRegEx = /\.css$/;
@@ -77,7 +78,7 @@ function ExampleBuilder(config) {
  * @param {Object} compiler The webpack compiler.
  */
 ExampleBuilder.prototype.apply = function(compiler) {
-  compiler.plugin('emit', async (compilation, callback) => {
+  compiler.hooks.emit.tapPromise('ExampleBuilder', async (compilation) => {
     const chunks = compilation.getStats().toJson().chunks
       .filter(chunk => chunk.names[0] !== this.common);
 
@@ -94,19 +95,11 @@ ExampleBuilder.prototype.apply = function(compiler) {
       });
 
       for (const file in assets) {
-        compilation.assets[file] = {
-          source: () => assets[file],
-          size: () => assets[file].length
-        };
+        compilation.assets[file] = new RawSource(assets[file]);
       }
     });
 
-    try {
     await Promise.all(promises);
-    } catch (err) {
-      callback(err);
-      return;
-    }
 
     const info = {
       examples: exampleData,
@@ -114,12 +107,7 @@ ExampleBuilder.prototype.apply = function(compiler) {
     };
 
     const indexSource = `var info = ${JSON.stringify(info)}`;
-    compilation.assets['index.js'] = {
-      source: () => indexSource,
-      size: () => indexSource.length
-    };
-
-    callback();
+    compilation.assets['index.js'] = new RawSource(indexSource);
   });
 };
 

package.json

@@ -14,8 +14,8 @@
     "posttest": "npm run typecheck",
     "test": "npm run karma -- --single-run",
     "karma": "karma start test/karma.config.js",
-    "serve-examples": "mkdir -p build/examples && webpack --config examples/webpack/config.js --watch & serve build/examples",
-    "build-examples": "webpack --config examples/webpack/config.js --env=prod",
+    "serve-examples": "mkdir -p build/examples && webpack --config examples/webpack/config.js --mode development --watch & serve build/examples",
+    "build-examples": "webpack --config examples/webpack/config.js --mode production",
     "build-index": "node tasks/generate-index",
     "prebuild": "npm run build-index",
     "build": "rollup --config config/rollup.js",
@@ -47,9 +47,8 @@
     "babel-core": "^6.26.3",
     "babel-minify-webpack-plugin": "^0.3.0",
     "babel-plugin-jsdoc-closure": "1.5.1",
-    "chaikin-smooth": "1.0.4",
     "clean-css-cli": "4.1.11",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.4.1",
     "coveralls": "3.0.1",
     "eslint": "4.19.1",
     "eslint-config-openlayers": "^9.2.0",
@@ -59,7 +58,6 @@
     "glob": "^7.1.2",
     "google-closure-compiler": "20180506.0.0",
     "handlebars": "4.0.11",
-    "html-webpack-plugin": "^3.0.1",
     "istanbul": "0.4.5",
     "jquery": "3.3.1",
     "jsdoc": "3.5.5",
@@ -86,8 +84,9 @@
     "sinon": "^5.0.1",
     "url-polyfill": "^1.0.13",
     "walk": "^2.3.9",
-    "webpack": "3.11.0",
-    "webpack-merge": "4.1.2"
+    "webpack": "^4.0.0",
+    "webpack-cli": "^2.0.9",
+    "webpack-sources": "^1.1.0"
   },
   "eslintConfig": {
     "extends": "openlayers"

test/karma.config.js

@@ -56,6 +56,9 @@ module.exports = function(karma) {
     reporters: ['progress'],
     webpackMiddleware: {
       noInfo: true
+    },
+    webpack: {
+      mode: 'development'
     }
   });