Add webpack config to create a module bundle to be used with importmap (#5640)

* Add webpack config to create a module bundle to be used with importmap

* Fix webpack config for tests, importing a config doesn't handle the extends

* Rename webpack files to cjs

Author: vincentfretin

package.json

@@ -6,9 +6,10 @@
   "main": "dist/aframe-master.js",
   "scripts": {
     "dev": "cross-env INSPECTOR_VERSION=dev webpack serve --port 8080",
-    "dist": "node scripts/updateVersionLog.js && npm run dist:min && npm run dist:max",
-    "dist:max": "webpack --config webpack.config.js",
-    "dist:min": "webpack --config webpack.prod.config.js",
+    "dist": "node scripts/updateVersionLog.js && npm run dist:min && npm run dist:max && npm run dist:module",
+    "dist:max": "webpack --config webpack.config.cjs",
+    "dist:min": "webpack --config webpack.prod.config.cjs",
+    "dist:module": "webpack --config webpack.module.config.cjs",
     "docs": "markserv --dir docs --port 9001",
     "preghpages": "node ./scripts/preghpages.js",
     "ghpages": "gh-pages -d gh-pages",

tests/karma.conf.js

@@ -2,7 +2,7 @@
 var path = require('path');
 var glob = require('glob');
 var webpack = require('webpack');
-var webpackConfiguration = require('../webpack.config.js');
+var webpackConfiguration = require('../webpack.common.cjs');
 
 // Define test files.
 var FILES = [
@@ -38,7 +38,18 @@ webpackConfiguration.plugins.push(new webpack.ProvidePlugin({
   process: 'process/browser'
 }));
 // webpack will create a lot of files, use build directory instead of dist
-webpackConfiguration.output.path = path.resolve(__dirname, '../build');
+webpackConfiguration.output = {
+  library: {
+    name: 'AFRAME',
+    type: 'var',
+    export: 'default'
+  },
+  libraryTarget: 'umd',
+  path: path.resolve(__dirname, '../build'),
+  publicPath: '/dist/',
+  filename: 'aframe-master.js'
+};
+webpackConfiguration.mode = 'development';
 
 var karmaConf = {
   basePath: '../',

webpack.config.js renamed to webpack.common.cjs

@@ -3,27 +3,7 @@ var webpack = require('webpack');
 
 module.exports = {
   entry: './src/index.js',
-  output: {
-    library: {
-      name: 'AFRAME',
-      type: 'var',
-      export: 'default'
-    },
-    libraryTarget: 'umd',
-    path: path.resolve(__dirname, 'dist'),
-    publicPath: '/dist/',
-    filename: 'aframe-master.js'
-  },
   devtool: 'source-map',
-  mode: 'development',
-  devServer: {
-    port: process.env.PORT || 9000,
-    hot: false,
-    liveReload: true,
-    static: {
-      directory: 'examples'
-    }
-  },
   plugins: [
     new webpack.DefinePlugin({
       INSPECTOR_VERSION: JSON.stringify(

webpack.config.cjs

@@ -0,0 +1,26 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  extends: ['webpack.common.cjs'],
+  output: {
+    library: {
+      name: 'AFRAME',
+      type: 'var',
+      export: 'default'
+    },
+    libraryTarget: 'umd',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/dist/',
+    filename: 'aframe-master.js'
+  },
+  mode: 'development',
+  devServer: {
+    port: process.env.PORT || 9000,
+    hot: false,
+    liveReload: true,
+    static: {
+      directory: 'examples'
+    }
+  }
+};

webpack.module.config.cjs

@@ -0,0 +1,36 @@
+var path = require('path');
+var TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  extends: ['webpack.common.cjs'],
+  output: {
+    libraryTarget: 'module',
+    path: path.resolve(__dirname, 'dist'),
+    publicPath: '/dist/',
+    filename: 'aframe-master.module.min.js'
+  },
+  experiments: {
+    outputModule: true
+  },
+  externalsType: 'module',
+  externals: {
+    three: 'three'
+  },
+  mode: 'production',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {
+            passes: 2
+          },
+          format: {
+            comments: false
+          }
+        },
+        extractComments: false
+      })
+    ]
+  }
+};

webpack.prod.config.js renamed to webpack.prod.config.cjs

@@ -2,7 +2,7 @@ var path = require('path');
 var TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
-  extends: ['webpack.config.js'],
+  extends: ['webpack.common.cjs'],
   output: {
     library: {
       name: 'AFRAME',