From 4543bfeacf5c572d52a657d1ce3166b922c0e55b Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Thu, 23 Jan 2025 11:05:44 +0100 Subject: [PATCH 1/3] Add webpack config to create a module bundle to be used with importmap --- package.json | 3 ++- webpack.common.js | 31 +++++++++++++++++++++++++++++++ webpack.config.js | 27 +-------------------------- webpack.module.config.js | 36 ++++++++++++++++++++++++++++++++++++ webpack.prod.config.js | 2 +- 5 files changed, 71 insertions(+), 28 deletions(-) create mode 100644 webpack.common.js create mode 100644 webpack.module.config.js diff --git a/package.json b/package.json index 0200dfd00f4..973defe3f5b 100644 --- a/package.json +++ b/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": "node scripts/updateVersionLog.js && npm run dist:min && npm run dist:max && npm run dist:module", "dist:max": "webpack --config webpack.config.js", "dist:min": "webpack --config webpack.prod.config.js", + "dist:module": "webpack --config webpack.module.config.js", "docs": "markserv --dir docs --port 9001", "preghpages": "node ./scripts/preghpages.js", "ghpages": "gh-pages -d gh-pages", diff --git a/webpack.common.js b/webpack.common.js new file mode 100644 index 00000000000..e7c3706168c --- /dev/null +++ b/webpack.common.js @@ -0,0 +1,31 @@ +var path = require('path'); +var webpack = require('webpack'); + +module.exports = { + entry: './src/index.js', + devtool: 'source-map', + plugins: [ + new webpack.DefinePlugin({ + INSPECTOR_VERSION: JSON.stringify( + process.env.INSPECTOR_VERSION + ) + }), + new webpack.ProvidePlugin({ + Buffer: ['buffer', 'Buffer'] + }) + ], + module: { + rules: [ + { + test: /\.js$/, + use: { + loader: 'babel-loader' + } + }, + { + test: /\.css$/, + use: ['style-loader', 'css-loader'] + } + ] + } +}; diff --git a/webpack.config.js b/webpack.config.js index ac47f2f5cce..ad6b2356996 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,7 +2,7 @@ var path = require('path'); var webpack = require('webpack'); module.exports = { - entry: './src/index.js', + extends: ['webpack.common.js'], output: { library: { name: 'AFRAME', @@ -14,7 +14,6 @@ module.exports = { publicPath: '/dist/', filename: 'aframe-master.js' }, - devtool: 'source-map', mode: 'development', devServer: { port: process.env.PORT || 9000, @@ -23,29 +22,5 @@ module.exports = { static: { directory: 'examples' } - }, - plugins: [ - new webpack.DefinePlugin({ - INSPECTOR_VERSION: JSON.stringify( - process.env.INSPECTOR_VERSION - ) - }), - new webpack.ProvidePlugin({ - Buffer: ['buffer', 'Buffer'] - }) - ], - module: { - rules: [ - { - test: /\.js$/, - use: { - loader: 'babel-loader' - } - }, - { - test: /\.css$/, - use: ['style-loader', 'css-loader'] - } - ] } }; diff --git a/webpack.module.config.js b/webpack.module.config.js new file mode 100644 index 00000000000..d4c767ce4cd --- /dev/null +++ b/webpack.module.config.js @@ -0,0 +1,36 @@ +var path = require('path'); +var TerserPlugin = require('terser-webpack-plugin'); + +module.exports = { + extends: ['webpack.common.js'], + 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 + }) + ] + } +}; diff --git a/webpack.prod.config.js b/webpack.prod.config.js index 982c21958e7..997d90c9338 100644 --- a/webpack.prod.config.js +++ b/webpack.prod.config.js @@ -2,7 +2,7 @@ var path = require('path'); var TerserPlugin = require('terser-webpack-plugin'); module.exports = { - extends: ['webpack.config.js'], + extends: ['webpack.common.js'], output: { library: { name: 'AFRAME', From f5079f7fb1c94552da782797ebc899153b7555d0 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Thu, 23 Jan 2025 11:44:55 +0100 Subject: [PATCH 2/3] Fix webpack config for tests, importing a config doesn't handle the extends --- tests/karma.conf.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/tests/karma.conf.js b/tests/karma.conf.js index a3858227458..19f7c591e1a 100644 --- a/tests/karma.conf.js +++ b/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.js'); // 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: '../', From 41a0f085985ed0f230c4567ae36342f7c0e67680 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Thu, 23 Jan 2025 11:50:20 +0100 Subject: [PATCH 3/3] Rename webpack files to cjs --- package.json | 6 +++--- tests/karma.conf.js | 2 +- webpack.common.js => webpack.common.cjs | 0 webpack.config.js => webpack.config.cjs | 2 +- webpack.module.config.js => webpack.module.config.cjs | 2 +- webpack.prod.config.js => webpack.prod.config.cjs | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) rename webpack.common.js => webpack.common.cjs (100%) rename webpack.config.js => webpack.config.cjs (93%) rename webpack.module.config.js => webpack.module.config.cjs (95%) rename webpack.prod.config.js => webpack.prod.config.cjs (94%) diff --git a/package.json b/package.json index 973defe3f5b..7ab1b86ba60 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "scripts": { "dev": "cross-env INSPECTOR_VERSION=dev webpack serve --port 8080", "dist": "node scripts/updateVersionLog.js && npm run dist:min && npm run dist:max && npm run dist:module", - "dist:max": "webpack --config webpack.config.js", - "dist:min": "webpack --config webpack.prod.config.js", - "dist:module": "webpack --config webpack.module.config.js", + "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", diff --git a/tests/karma.conf.js b/tests/karma.conf.js index 19f7c591e1a..c3bcceb8caf 100644 --- a/tests/karma.conf.js +++ b/tests/karma.conf.js @@ -2,7 +2,7 @@ var path = require('path'); var glob = require('glob'); var webpack = require('webpack'); -var webpackConfiguration = require('../webpack.common.js'); +var webpackConfiguration = require('../webpack.common.cjs'); // Define test files. var FILES = [ diff --git a/webpack.common.js b/webpack.common.cjs similarity index 100% rename from webpack.common.js rename to webpack.common.cjs diff --git a/webpack.config.js b/webpack.config.cjs similarity index 93% rename from webpack.config.js rename to webpack.config.cjs index ad6b2356996..d2557dbeeb3 100644 --- a/webpack.config.js +++ b/webpack.config.cjs @@ -2,7 +2,7 @@ var path = require('path'); var webpack = require('webpack'); module.exports = { - extends: ['webpack.common.js'], + extends: ['webpack.common.cjs'], output: { library: { name: 'AFRAME', diff --git a/webpack.module.config.js b/webpack.module.config.cjs similarity index 95% rename from webpack.module.config.js rename to webpack.module.config.cjs index d4c767ce4cd..eeb68809a5c 100644 --- a/webpack.module.config.js +++ b/webpack.module.config.cjs @@ -2,7 +2,7 @@ var path = require('path'); var TerserPlugin = require('terser-webpack-plugin'); module.exports = { - extends: ['webpack.common.js'], + extends: ['webpack.common.cjs'], output: { libraryTarget: 'module', path: path.resolve(__dirname, 'dist'), diff --git a/webpack.prod.config.js b/webpack.prod.config.cjs similarity index 94% rename from webpack.prod.config.js rename to webpack.prod.config.cjs index 997d90c9338..329113bc5e1 100644 --- a/webpack.prod.config.js +++ b/webpack.prod.config.cjs @@ -2,7 +2,7 @@ var path = require('path'); var TerserPlugin = require('terser-webpack-plugin'); module.exports = { - extends: ['webpack.common.js'], + extends: ['webpack.common.cjs'], output: { library: { name: 'AFRAME',