Merge pull request #8258 from ahocevar/webpack-4

Use Webpack 4 for tests (and examples)

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,21 @@ examples.forEach(example => {
   entry[example] = `./${example}.js`;
 });
 
-const main = {
+module.exports = {
   context: src,
   target: 'web',
   entry: entry,
-  plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
+  optimization: {
+    runtimeChunk: {
+      name: 'common'
+    },
+    splitChunks: {
       name: 'common',
+      chunks: 'initial',
       minChunks: 2
-    }),
+    }
+  },
+  plugins: [
     new ExampleBuilder({
       templates: path.join(__dirname, '..', 'templates'),
       common: 'common'
@@ -38,45 +41,9 @@ const main = {
       {from: 'index.html', to: 'index.html'}
     ])
   ],
+  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$/;
@@ -60,6 +61,28 @@ function createWordIndex(exampleData) {
   return index;
 }
 
+/**
+ * Gets the source for the chunk that matches the jsPath
+ * @param {Object} chunk Chunk.
+ * @param {string} jsPath Path of the file.
+ * @return {string} The source.
+ */
+function getJsSource(chunk, jsPath) {
+  let jsSource;
+  for (let i = 0, ii = chunk.modules.length; i < ii; ++i) {
+    const module = chunk.modules[i];
+    if (module.modules) {
+      jsSource = getJsSource(module, jsPath);
+      if (jsSource) {
+        return jsSource;
+      }
+    }
+    if (module.identifier == jsPath) {
+      return module.source;
+    }
+  }
+}
+
 /**
  * A webpack plugin that builds the html files for our examples.
  * @param {Object} config Plugin configuration.  Requires a `templates` property
@@ -77,7 +100,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 +117,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 +129,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);
   });
 };
 
@@ -142,14 +152,7 @@ ExampleBuilder.prototype.render = async function(dir, chunk) {
   // add in script tag
   const jsName = `${name}.js`;
   const jsPath = path.join(dir, jsName);
-  let jsSource;
-  for (let i = 0, ii = chunk.modules.length; i < ii; ++i) {
-    const module = chunk.modules[i];
-    if (module.identifier == jsPath) {
-      jsSource = module.source;
-      break;
-    }
-  }
+  let jsSource = getJsSource(chunk, jsPath);
   jsSource = jsSource.replace(/'\.\.\/src\//g, '\'');
   if (data.cloak) {
     for (const entry of data.cloak) {

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",
@@ -45,11 +45,10 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
-    "babel-minify-webpack-plugin": "^0.3.0",
     "babel-plugin-jsdoc-closure": "1.5.1",
-    "chaikin-smooth": "1.0.4",
+    "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",
@@ -69,7 +67,8 @@
     "karma-firefox-launcher": "^1.1.0",
     "karma-mocha": "1.3.0",
     "karma-sauce-launcher": "1.2.0",
-    "karma-webpack": "3.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "4.0.0-beta.0",
     "marked": "0.4.0",
     "mocha": "5.2.0",
     "mustache": "^2.3.0",
@@ -82,12 +81,13 @@
     "rollup-plugin-node-resolve": "3.3.0",
     "rollup-plugin-sourcemaps": "0.4.2",
     "rollup-plugin-uglify": "4.0.0",
-    "serve": "^8.0.0",
+    "serve": "^8.1.1",
     "sinon": "^5.0.1",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-polyfill": "^1.0.13",
     "walk": "^2.3.9",
-    "webpack": "3.11.0",
-    "webpack-merge": "4.1.2"
+    "webpack": "4.12.0",
+    "webpack-cli": "^3.0.3"
   },
   "eslintConfig": {
     "extends": "openlayers"

test/index.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>OL Spec Runner</title>
-  <meta charset="utf-8">
-  <link rel="stylesheet" type="text/css" href="../node_modules/mocha/mocha.css">
-</head>
-
-<body>
-  <div id="mocha"></div>
-
-  <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
-  <script type="text/javascript" src="../node_modules/expect.js/index.js"></script>
-  <script type="text/javascript" src="../node_modules/sinon/pkg/sinon.js"></script>
-  <script type="text/javascript" src="../node_modules/mocha/mocha.js"></script>
-  <script type="text/javascript" src="../node_modules/proj4/dist/proj4.js"></script>
-  <script type="text/javascript" src="test-extensions.js"></script>
-  <!-- load polyfills: Always load the URL polyfill in a gated form so that
-       MS Edge has it -->
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL|always|gated"></script>
-  <script>
-    if (typeof initMochaPhantomJS === 'function') {
-      initMochaPhantomJS()
-    }
-    mocha.setup({
-      ui: 'bdd',
-      bail: false
-    });
-  </script>
-
-  <!-- This script is provided by the debug server (started with `make serve`) -->
-  <script type="text/javascript" src="loader.js"></script>
-
-  <script type="text/javascript">
-
-    var runner = mocha.run();
-    if (window.console && console.log) {
-      // write stacks to the console for failed tests
-      runner.on('fail', function(test, err) {
-        if (test.duration > test._timeout) {
-          var titles = [];
-          for (var p = test; p; p = p.parent) {
-            if (p.title) {
-              titles.unshift(p.title);
-            }
-          }
-          console.log('Test timed out:', titles.join(' > '));
-        }
-        console.error(test.err.stack);
-      });
-    }
-  </script>
-  <!--
-    Tests should not depend on any specific markup and should instead create
-    whatever elements are needed (cleaning up when done).
-  -->
-</body>
-</html>

test/index_test.js

@@ -0,0 +1,5 @@
+// require all modules ending in ".test.js" from the
+// current directory and all subdirectories
+const testsContext = require.context('.', true, /\.test\.js$/);
+
+testsContext.keys().forEach(testsContext);

test/karma.config.js

@@ -39,21 +39,29 @@ module.exports = function(karma) {
       }, {
         pattern: path.resolve(__dirname, './test-extensions.js')
       }, {
-        pattern: '**/*.test.js'
+        pattern: path.resolve(__dirname, './index_test.js'),
+        watched: false
       }, {
         pattern: '**/*',
         included: false,
         watched: false
       }
     ],
+    exclude: [
+      '**/*.test.js'
+    ],
     proxies: {
       '/rendering/': '/base/rendering/',
       '/spec/': '/base/spec/'
     },
     preprocessors: {
-      '**/*.js': ['webpack']
+      '**/*.js': ['webpack', 'sourcemap']
     },
     reporters: ['progress'],
+    webpack: {
+      devtool: 'inline-source-map',
+      mode: 'development'
+    },
     webpackMiddleware: {
       noInfo: true
     }