Update webpack

examples/webpack/config.js

@@ -58,7 +58,6 @@ module.exports = {
   optimization: {
     minimizer: [
       new TerserPlugin({
-        sourceMap: true,
         // Do not minify examples that inject code into workers
         exclude: [/(color-manipulation|region-growing|raster)\.js/],
         extractComments: false,
@@ -94,10 +93,10 @@ module.exports = {
     filename: '[name].js',
     path: path.join(__dirname, '..', '..', 'build', 'examples'),
   },
-  node: {
-    fs: 'empty', // required by ol-mapbox-stlye
-  },
   resolve: {
+    fallback: {
+      fs: false,
+    },
     alias: {
       // allow imports from 'ol/module' instead of specifiying the source path
       ol: path.join(__dirname, '..', '..', 'src', 'ol'),

examples/webpack/example-builder.js

@@ -108,28 +108,6 @@ function createWordIndex(exampleData) {
   return index;
 }
 
-/**
- * Gets the source for the chunk that matches the jsPath
- * @param {Object} chunk Chunk.
- * @param {string} jsName Name of the file.
- * @return {string} The source.
- */
-function getJsSource(chunk, jsName) {
-  let jsSource;
-  for (let i = 0, ii = chunk.modules.length; i < ii; ++i) {
-    const module = chunk.modules[i];
-    if (module.modules) {
-      jsSource = getJsSource(module, jsName);
-      if (jsSource) {
-        return jsSource;
-      }
-    }
-    if (module.identifier.endsWith(jsName) && module.source) {
-      return module.source;
-    }
-  }
-}
-
 /**
  * Gets dependencies from the js source.
  * @param {string} jsSource Source.
@@ -170,6 +148,7 @@ class ExampleBuilder {
    * common chunk.
    */
   constructor(config) {
+    this.name = 'ExampleBuilder';
     this.templates = config.templates;
     this.common = config.common;
   }
@@ -179,74 +158,95 @@ class ExampleBuilder {
    * @param {Object} compiler The webpack compiler.
    */
   apply(compiler) {
-    compiler.hooks.emit.tapPromise('ExampleBuilder', async (compilation) => {
+    compiler.hooks.compilation.tap(this.name, (compilation) => {
-      const chunks = compilation
+      compilation.hooks.additionalAssets.tapPromise(this.name, async () => {
-        .getStats()
+        await this.addAssets(compilation.assets, compiler.context);
-        .toJson()
-        .chunks.filter((chunk) => chunk.names[0] !== this.common);
-
-      const exampleData = [];
-      await Promise.all(
-        chunks.map(async (chunk) => {
-          const data = await this.readHtml(compiler.context, chunk);
-          exampleData.push(data);
-        })
-      );
-      const examples = exampleData.map((data) => {
-        return {
-          link: data.filename,
-          title: data.title,
-          shortdesc: data.shortdesc,
-          tags: data.tags,
-        };
       });
-
-      examples.sort((a, b) =>
-        a.title.localeCompare(b.title, 'en', {sensitivity: 'base'})
-      );
-      const tagIndex = createTagIndex(examples);
-      const info = {
-        examples: examples,
-        // Tags for main page... TODO: implement index tag links
-        // tagIndex: sortObjectByKey(tagIndex),
-        wordIndex: sortObjectByKey(createWordIndex(examples)),
-      };
-      exampleData.forEach((data) => {
-        data.tags = data.tags.map((tag) => {
-          const tagExamples = tagIndex[tag.toLowerCase()];
-          return {
-            tag: tag,
-            examples: tagExamples.map((exampleIdx) => {
-              const example = examples[exampleIdx];
-              return {
-                link: example.link,
-                title: example.title,
-                isCurrent: data.filename === example.link,
-              };
-            }),
-          };
-        });
-      });
-
-      await Promise.all(
-        exampleData.map(async (data) => {
-          const assets = await this.render(data, data.chunk);
-          for (const file in assets) {
-            compilation.assets[file] = new RawSource(assets[file]);
-          }
-        })
-      );
-      const indexSource = `const info = ${JSON.stringify(info)};`;
-      compilation.assets['examples-info.js'] = new RawSource(indexSource);
     });
   }
 
-  async readHtml(dir, chunk) {
+  async addAssets(assets, dir) {
-    const name = chunk.names[0];
+    const jsAssetRE = new RegExp(/^(\w|-)+\.js$/);
+    const names = [];
+    for (const filename in assets) {
+      if (!jsAssetRE.test(filename)) {
+        continue;
+      }
+
+      const name = filename.replace(/\.js$/, '');
+      if (name === this.common) {
+        continue;
+      }
+
+      names.push(name);
+    }
+
+    if (names.length === 0) {
+      return;
+    }
+
+    const exampleData = await Promise.all(
+      names.map(async (name) => await this.parseExample(dir, name))
+    );
+
+    const examples = exampleData.map((data) => {
+      return {
+        link: data.filename,
+        title: data.title,
+        shortdesc: data.shortdesc,
+        tags: data.tags,
+      };
+    });
+
+    examples.sort((a, b) =>
+      a.title.localeCompare(b.title, 'en', {sensitivity: 'base'})
+    );
+    const tagIndex = createTagIndex(examples);
+    const info = {
+      examples: examples,
+      // Tags for main page... TODO: implement index tag links
+      // tagIndex: sortObjectByKey(tagIndex),
+      wordIndex: sortObjectByKey(createWordIndex(examples)),
+    };
+    exampleData.forEach((data) => {
+      data.tags = data.tags.map((tag) => {
+        const tagExamples = tagIndex[tag.toLowerCase()];
+        return {
+          tag: tag,
+          examples: tagExamples.map((exampleIdx) => {
+            const example = examples[exampleIdx];
+            return {
+              link: example.link,
+              title: example.title,
+              isCurrent: data.filename === example.link,
+            };
+          }),
+        };
+      });
+    });
+
+    await Promise.all(
+      exampleData.map(async (data) => {
+        const newAssets = await this.render(data);
+        for (const file in newAssets) {
+          assets[file] = new RawSource(newAssets[file]);
+        }
+      })
+    );
+
+    const indexSource = `const info = ${JSON.stringify(info)};`;
+    assets['examples-info.js'] = new RawSource(indexSource);
+  }
+
+  async parseExample(dir, name) {
     const htmlName = `${name}.html`;
     const htmlPath = path.join(dir, htmlName);
     const htmlSource = await readFile(htmlPath, {encoding: 'utf8'});
 
+    const jsName = `${name}.js`;
+    const jsPath = path.join(dir, jsName);
+    const jsSource = await readFile(jsPath, {encoding: 'utf8'});
+
     const {attributes, body} = frontMatter(htmlSource);
     assert(!!attributes.layout, `missing layout in ${htmlPath}`);
     const data = Object.assign(attributes, {contents: body});
@@ -254,7 +254,8 @@ class ExampleBuilder {
     data.olVersion = pkg.version;
     data.filename = htmlName;
     data.dir = dir;
-    data.chunk = chunk;
+    data.name = name;
+    data.jsSource = jsSource;
 
     // process tags
     if (data.tags) {
@@ -265,20 +266,15 @@ class ExampleBuilder {
     return data;
   }
 
-  async render(data, chunk) {
+  async render(data) {
-    const name = chunk.names[0];
-
     const assets = {};
     const readOptions = {encoding: 'utf8'};
 
     // add in script tag
-    const jsName = `${name}.js`;
+    const jsName = `${data.name}.js`;
-    let jsSource = getJsSource(chunk, path.join('.', jsName));
+
-    if (!jsSource) {
-      throw new Error(`No .js source for ${jsName}`);
-    }
     // remove "../src/" prefix and ".js" to have the same import syntax as the documentation
-    jsSource = jsSource.replace(/'\.\.\/src\//g, "'");
+    let jsSource = data.jsSource.replace(/'\.\.\/src\//g, "'");
     jsSource = jsSource.replace(/\.js';/g, "';");
     if (data.cloak) {
       for (const entry of data.cloak) {
@@ -299,7 +295,7 @@ class ExampleBuilder {
     };
 
     // check for worker js
-    const workerName = `${name}.worker.js`;
+    const workerName = `${data.name}.worker.js`;
     const workerPath = path.join(data.dir, workerName);
     let workerSource;
     try {
@@ -327,7 +323,7 @@ class ExampleBuilder {
 
     data.pkgJson = JSON.stringify(
       {
-        name: name,
+        name: data.name,
         dependencies: getDependencies(
           jsSource + (workerSource ? `\n${workerSource}` : '')
         ),
@@ -344,7 +340,7 @@ class ExampleBuilder {
     );
 
     // check for example css
-    const cssName = `${name}.css`;
+    const cssName = `${data.name}.css`;
     const cssPath = path.join(data.dir, cssName);
     let cssSource;
     try {

package.json

@@ -51,16 +51,19 @@
     "@babel/core": "^7.6.4",
     "@babel/preset-env": "^7.4.4",
     "@openlayers/eslint-plugin": "^4.0.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
     "@types/arcgis-rest-api": "^10.4.4",
     "@types/geojson": "^7946.0.7",
     "@types/pbf": "^3.0.2",
     "@types/topojson-specification": "^1.0.1",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "^8.2.2",
     "buble": "^0.20.0",
     "buble-loader": "^0.5.1",
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "5.2.2",
-    "copy-webpack-plugin": "^6.0.1",
+    "copy-webpack-plugin": "^8.0.0",
     "coveralls": "3.1.0",
     "eslint": "^7.2.0",
     "eslint-config-openlayers": "^15.0.0",
@@ -77,13 +80,13 @@
     "jsdoc": "3.6.6",
     "jsdoc-plugin-typescript": "^2.0.5",
     "json-stringify-safe": "^5.0.1",
-    "karma": "^6.0.1",
+    "karma": "^6.2.0",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.0",
     "karma-firefox-launcher": "^2.0.0",
     "karma-mocha": "2.0.1",
-    "karma-sourcemap-loader": "^0.3.7",
+    "karma-sourcemap-loader": "^0.3.8",
-    "karma-webpack": "^4.0.0-rc.2",
+    "karma-webpack": "^5.0.0",
     "loglevelnext": "^4.0.1",
     "marked": "2.0.1",
     "mocha": "8.3.2",
@@ -91,23 +94,21 @@
     "pngjs": "^6.0.0",
     "proj4": "2.7.2",
     "puppeteer": "8.0.0",
-    "rollup": "^2.1.0",
+    "rollup": "^2.42.3",
-    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^7.0.0",
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
     "sinon": "^9.0.0",
-    "terser-webpack-plugin": "^4.0.0",
+    "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^4.0.2",
+    "typescript": "^4.2.3",
     "url-polyfill": "^1.1.5",
     "walk": "^2.3.9",
-    "webpack": "4.46.0",
+    "webpack": "^5.27.2",
-    "webpack-cli": "^4.0.0",
+    "webpack-cli": "^4.5.0",
-    "webpack-dev-middleware": "^4.0.0",
+    "webpack-dev-middleware": "^4.1.0",
-    "webpack-dev-server": "^3.3.1",
+    "webpack-dev-server": "^3.11.2",
-    "worker-loader": "^3.0.0",
+    "webpack-sources": "^2.2.0",
+    "worker-loader": "^3.0.8",
     "yargs": "^16.0.3"
   },
   "eslintConfig": {

tasks/serialize-workers.js

@@ -1,7 +1,7 @@
 const path = require('path');
-const babel = require('rollup-plugin-babel');
+const babel = require('@rollup/plugin-babel').babel;
-const resolve = require('rollup-plugin-node-resolve');
+const resolve = require('@rollup/plugin-node-resolve').nodeResolve;
-const common = require('rollup-plugin-commonjs');
+const common = require('@rollup/plugin-commonjs');
 const rollup = require('rollup');
 const terser = require('rollup-plugin-terser').terser;
 const fse = require('fs-extra');
@@ -20,8 +20,8 @@ async function build(input, {minify = true} = {}) {
     common(),
     resolve(),
     babel({
-      'externalHelpers': true,
+      babelHelpers: 'bundled',
-      'presets': [
+      presets: [
         [
           '@babel/preset-env',
           {