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;
-    }
+    await Promise.all(promises);
 
     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);
   });
 };