upgrading webpack and adjusting gulp run and build

Tools/DevLoader/BabylonLoader.js

@@ -239,11 +239,12 @@ var BABYLONDEVTOOLS;
             else {
                 this.loadScript('/dist/preview release/babylon.max.js');
             }
+            this.loadScript('/dist/preview release/gui/babylon.gui.js');
 
             // Modules
             if (loadModules) {
                 for (var i = 0; i < settings.modules.length; i++) {
-                    if (settings.modules[i] === "viewer") {
+                    if (settings.modules[i] === "viewer" || settings.modules[i] === "gui") {
                         continue;
                     }
                     this.loadModule(settings[settings.modules[i]]);

Tools/Gulp/config.json

@@ -119,7 +119,7 @@
             "videoDome",
             "photoDome",
             "behaviors",
-            "imageProcessing"            
+            "imageProcessing"
         ],
         "minimal": [
             "meshBuilder",
@@ -132,7 +132,7 @@
             "picking",
             "backgroundMaterial",
             "videoDome"
-        ]      
+        ]
     },
     "workloads": {
         "core": {
@@ -222,7 +222,7 @@
                 "fresnelFunction",
                 "reflectionFunction",
                 "imageProcessingDeclaration",
-                "imageProcessingFunctions",                
+                "imageProcessingFunctions",
                 "bumpFragmentFunctions",
                 "clipPlaneFragmentDeclaration",
                 "fogFragmentDeclaration",
@@ -240,7 +240,7 @@
             "dependUpon": [
                 "core"
             ]
-        },   
+        },
         "imageProcessing": {
             "files": [
                 "../../src/Materials/babylon.imageProcessingConfiguration.js",
@@ -250,7 +250,7 @@
             "dependUpon": [
                 "core"
             ]
-        },        
+        },
         "particles": {
             "files": [
                 "../../src/Particles/babylon.particle.js",
@@ -1127,7 +1127,7 @@
             "shaders": [
                 "anaglyph.fragment"
             ]
-        },       
+        },
         "stereoscopic": {
             "files": [
                 "../../src/PostProcess/babylon.stereoscopicInterlacePostProcess.js",
@@ -1145,7 +1145,7 @@
             "shaders": [
                 "stereoscopicInterlace.fragment"
             ]
-        },           
+        },
         "vr": {
             "files": [
                 "../../src/PostProcess/babylon.vrDistortionCorrectionPostProcess.js",
@@ -1763,61 +1763,16 @@
     "gui": {
         "libraries": [
             {
-                "files": [
-                    "../../gui/src/2D/style.ts",
-                    "../../gui/src/2D/valueAndUnit.ts",
-                    "../../gui/src/2D/advancedDynamicTexture.ts",
-                    "../../gui/src/2D/measure.ts",
-                    "../../gui/src/2D/math2D.ts",
-                    "../../gui/src/2D/multiLinePoint.ts",
-                    "../../gui/src/2D/controls/control.ts",
-                    "../../gui/src/2D/controls/container.ts",
-                    "../../gui/src/2D/controls/stackPanel.ts",
-                    "../../gui/src/2D/controls/rectangle.ts",
-                    "../../gui/src/2D/controls/ellipse.ts",
-                    "../../gui/src/2D/controls/line.ts",
-                    "../../gui/src/2D/controls/slider.ts",
-                    "../../gui/src/2D/controls/checkbox.ts",
-                    "../../gui/src/2D/controls/radioButton.ts",
-                    "../../gui/src/2D/controls/textBlock.ts",
-                    "../../gui/src/2D/controls/image.ts",
-                    "../../gui/src/2D/controls/button.ts",
-                    "../../gui/src/2D/controls/colorpicker.ts",
-                    "../../gui/src/2D/controls/inputText.ts",
-                    "../../gui/src/2D/controls/virtualKeyboard.ts",
-                    "../../gui/src/2D/controls/multiLine.ts",
-                    "../../gui/src/2D/controls/grid.ts",                    
-                    "../../gui/src/3D/gui3DManager.ts",
-                    "../../gui/src/3D/materials/fluentMaterial.ts",
-                    "../../gui/src/3D/vector3WithInfo.ts",
-                    "../../gui/src/3D/controls/control3D.ts",
-                    "../../gui/src/3D/controls/container3D.ts",
-                    "../../gui/src/3D/controls/abstractButton3D.ts",
-                    "../../gui/src/3D/controls/button3D.ts",
-                    "../../gui/src/3D/controls/meshButton3D.ts",
-                    "../../gui/src/3D/controls/holographicButton.ts",
-                    "../../gui/src/3D/controls/stackPanel3D.ts",
-                    "../../gui/src/3D/controls/volumeBasedPanel.ts",
-                    "../../gui/src/3D/controls/spherePanel.ts",
-                    "../../gui/src/3D/controls/planePanel.ts",
-                    "../../gui/src/3D/controls/scatterPanel.ts",
-                    "../../gui/src/3D/controls/cylinderPanel.ts"
-                ],
-                "shaderFiles": [
-                    "../../gui/src/3D/materials/shaders/fluent.vertex.fx",
-                    "../../gui/src/3D/materials/shaders/fluent.fragment.fx"
-                ],
+                "files": [],
+                "noBundleInName": true,
                 "output": "babylon.gui.js",
-                "buildAsModule": true,
-                "moduleName": "babylonjs-gui",
-                "moduleDeclaration": {
-                    "name": "GUI",
-                    "module": "babylonjs-gui"
-                }
+                "webpack": "../../gui/webpack.config.js",
+                "bundle": "true",
+                "babylonIncluded": true
             }
         ],
         "build": {
-            "srcOutputDirectory": "../../gui/",
+            "srcOutputDirectory": "../../gui/src/",
             "distOutputDirectory": "/gui/"
         }
     },
@@ -1916,7 +1871,8 @@
                     "name": "BabylonViewer",
                     "module": "babylonjs-viewer"
                 },
-                "babylonIncluded": true
+                "babylonIncluded": true,
+                "noWatch": true
             }
         ],
         "build": {
@@ -1974,7 +1930,8 @@
                     "name": "BabylonViewerAssets",
                     "module": "babylonjs-viewer-assets"
                 },
-                "babylonIncluded": true
+                "babylonIncluded": true,
+                "noWatch": true
             }
         ],
         "build": {

Tools/Gulp/gulpfile.js

@@ -16,7 +16,6 @@ var merge2 = require("merge2");
 var concat = require("gulp-concat");
 var rename = require("gulp-rename");
 var cleants = require("gulp-clean-ts-extends");
-var changedInPlace = require("gulp-changed-in-place");
 var runSequence = require("run-sequence");
 var replace = require("gulp-replace");
 var uncommentShader = require("./gulp-removeShaderComments");
@@ -25,10 +24,10 @@ var optimisejs = require("gulp-optimize-js");
 var webserver = require("gulp-webserver");
 var path = require("path");
 var sass = require("gulp-sass");
-var webpack = require("webpack-stream");
+const webpack = require('webpack');
+var webpackStream = require("webpack-stream");
 var typedoc = require("gulp-typedoc");
 var validateTypedoc = require("./gulp-validateTypedoc");
-var request = require('request');
 var fs = require("fs");
 var dtsBundle = require('dts-bundle');
 const through = require('through2');
@@ -448,7 +447,7 @@ var buildExternalLibrary = function (library, settings, watch) {
 
         if (library.webpack) {
             let sequence = [waitAll];
-            let wpBuild = webpack(require(library.webpack));
+            let wpBuild = webpackStream(require(library.webpack), webpack);
             if (settings.build.outputs) {
                 //shoud dtsBundle create the declaration?
                 if (settings.build.dtsBundle) {
@@ -543,10 +542,10 @@ var buildExternalLibrary = function (library, settings, watch) {
             } else {
                 sequence.push(
                     wpBuild
-                        .pipe(rename(library.output.replace(".js", library.noBundleInName ? '.js' : ".bundle.js")))
-                        .pipe(addModuleExports(library.moduleDeclaration, { subModule: false, extendsRoot: library.extendsRoot, externalUsingBabylon: true }))
-                        .pipe(uglify())
-                        .pipe(optimisejs())
+                        //.pipe(rename(library.output.replace(".js", library.noBundleInName ? '.js' : ".bundle.js")))
+                        //.pipe(addModuleExports(library.moduleDeclaration, { subModule: false, extendsRoot: library.extendsRoot, externalUsingBabylon: true }))
+                        //.pipe(uglify())
+                        //.pipe(optimisejs())
                         .pipe(gulp.dest(outputDirectory))
                 )
             }
@@ -623,22 +622,35 @@ gulp.task("watch", ["srcTscWatch"], function () {
     var tasks = [];
 
     config.modules.map(function (module) {
+
         config[module].libraries.map(function (library) {
-            tasks.push(gulp.watch(library.files, { interval: interval }, function () {
-                console.log(library.output);
-                return buildExternalLibrary(library, config[module], true)
-                    .pipe(debug());
-            }));
-            tasks.push(gulp.watch(library.shaderFiles, { interval: interval }, function () {
-                console.log(library.output);
-                return buildExternalLibrary(library, config[module], true)
-                    .pipe(debug())
-            }));
-            tasks.push(gulp.watch(library.sassFiles, { interval: interval }, function () {
-                console.log(library.output);
-                return buildExternalLibrary(library, config[module], true)
-                    .pipe(debug())
-            }));
+            if (library.webpack) {
+                if (library.noWatch) return;
+                var outputDirectory = config.build.outputDirectory + config[module].build.distOutputDirectory;
+                let wpconfig = require(library.webpack);
+                wpconfig.watch = true;
+                // dev mode and absolute path sourcemaps for debugging
+                wpconfig.mode = "development";
+                wpconfig.output.devtoolModuleFilenameTemplate = "[absolute-resource-path]";
+                //config.stats = "minimal";
+                tasks.push(webpackStream(wpconfig, webpack).pipe(gulp.dest(outputDirectory)))
+            } else {
+                tasks.push(gulp.watch(library.files, { interval: interval }, function () {
+                    console.log(library.output);
+                    return buildExternalLibrary(library, config[module], true)
+                        .pipe(debug());
+                }));
+                tasks.push(gulp.watch(library.shaderFiles, { interval: interval }, function () {
+                    console.log(library.output);
+                    return buildExternalLibrary(library, config[module], true)
+                        .pipe(debug())
+                }));
+                tasks.push(gulp.watch(library.sassFiles, { interval: interval }, function () {
+                    console.log(library.output);
+                    return buildExternalLibrary(library, config[module], true)
+                        .pipe(debug())
+                }));
+            }
         });
     });
 
@@ -1096,7 +1108,7 @@ gulp.task("tests-viewer-validation-karma", ["tests-viewer-validation-transpile"]
  */
 gulp.task("tests-viewer-validation-transpile", function (done) {
 
-    let wpBuild = webpack(require('../../Viewer//webpack.gulp.config.js'));
+    let wpBuild = webpackStream(require('../../Viewer//webpack.gulp.config.js'));
 
     // clean the built directory
     rmDir("../../Viewer/tests/build/");
@@ -1115,7 +1127,7 @@ gulp.task("tests-viewer-validation-transpile", function (done) {
  */
 gulp.task("tests-viewer-transpile", function (done) {
 
-    let wpBuild = webpack(require('../../Viewer/tests/unit/webpack.config.js'));
+    let wpBuild = webpackStream(require('../../Viewer/tests/unit/webpack.config.js'));
 
     // clean the built directory
     rmDir("../../Viewer/tests/build/");

Tools/Gulp/package.json

@@ -59,6 +59,7 @@
         "ts-loader": "^2.3.7",
         "typedoc": "^0.9.0",
         "typescript": "~2.8.1",
+        "webpack": "^4.16.0",
         "webpack-stream": "^4.0.1"
     },
     "scripts": {

Viewer/package.json

@@ -27,15 +27,16 @@
         "@types/node": "^8.9.4",
         "base64-font-loader": "0.0.4",
         "base64-image-loader": "^1.2.1",
+        "base64-inline-loader": "^1.1.1",
         "deepmerge": "^2.1.1",
         "handlebars": "^4.0.11",
         "html-loader": "^0.5.5",
         "json-loader": "^0.5.7",
-        "ts-loader": "^2.3.7",
-        "typescript": "^2.7.2",
+        "ts-loader": "^4.4.0",
+        "typescript": "^2.9.2",
         "uglifyjs-webpack-plugin": "^1.2.2",
-        "webpack": "^3.11.0",
-        "webpack-dev-server": "^2.11.2"
+        "webpack": "^4.16.0",
+        "webpack-dev-server": "^3.1.4"
     },
     "dependencies": {
         "pepjs": "^0.4.3"

Viewer/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es2015",
+        "target": "es5",
         "module": "commonjs",
         "declaration": true,
         "experimentalDecorators": true,

Viewer/webpack.assets.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+    context: __dirname,
     entry: [
         __dirname + '/src/assets/index.ts'
     ],
@@ -10,8 +11,9 @@ module.exports = {
     resolve: {
         extensions: ['.ts']
     },
+    mode: "production",
     module: {
-        loaders: [{
+        rules: [{
             test: /\.tsx?$/,
             use: {
                 loader: 'ts-loader',
@@ -36,7 +38,7 @@ module.exports = {
         },
         {
             test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-            loader: 'base64-font-loader'
+            loader: 'base64-inline-loader?limit=1000&name=[name].[ext]'
         }]
     }
 }

Viewer/webpack.config.js

@@ -78,7 +78,7 @@ module.exports = /*[
             ])
         ],
         module: {
-            loaders: [{
+            rules: [{
                 test: /\.tsx?$/,
                 loader: 'ts-loader',
                 exclude: /node_modules/

Viewer/webpack.gulp.config.js

@@ -1,7 +1,10 @@
+const path = require('path');
+const webpack = require('webpack');
+
 module.exports = {
-    //context: __dirname,
+    context: __dirname,
     entry: [
-        __dirname + '/src/index.ts'
+        path.resolve(__dirname, './src/index.ts')
     ],
     output: {
         libraryTarget: 'var',
@@ -22,15 +25,11 @@ module.exports = {
             "babylonjs-viewer-assets": __dirname + '/src/assets/index.ts'
         }
     },
+    mode: "development",
     module: {
-        loaders: [{
+        rules: [{
             test: /\.tsx?$/,
-            use: {
-                loader: 'ts-loader',
-                options: {
-                    configFile: 'tsconfig-gulp.json'
-                }
-            },
+            loader: 'ts-loader',
             exclude: /node_modules/
         },
         {
@@ -48,7 +47,7 @@ module.exports = {
         },
         {
             test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-            loader: 'base64-font-loader'
+            loader: 'base64-inline-loader?limit=1000&name=[name].[ext]'
         }]
     }
 }

gui/package.json

@@ -4,7 +4,9 @@
     "description": "The js GUI library is an extension you can use to generate interactive user interface.\r It is build on top of the DynamicTexture.",
     "scripts": {
         "start:server": "webpack-dev-server",
-        "build": "webpack",
+        "start:watch": "webpack -w",
+        "build:dev": "webpack",
+        "build:prod": "webpack --mode=production",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "repository": {
@@ -35,4 +37,4 @@
     "dependencies": {
         "dts-bundle-webpack": "^1.0.0"
     }
-}
+}

gui/webpack.config.js

@@ -3,12 +3,13 @@ const webpack = require('webpack');
 const DtsBundleWebpack = require('dts-bundle-webpack')
 
 module.exports = {
+    context: __dirname,
     entry: {
-        'babylonjs-gui': './src/index.ts',
+        'babylonjs-gui': path.resolve(__dirname, './src/index.ts'),
     },
     output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name].js',
+        path: path.resolve(__dirname, '../dist/preview release/gui'),
+        filename: 'babylon.gui.js',
         libraryTarget: 'umd',
         library: {
             root: ["BABYLON", "GUI"],
@@ -16,7 +17,7 @@ module.exports = {
             commonjs: "babylonjs-gui"
         },
         umdNamedDefine: true,
-        //devtoolModuleFilenameTemplate: '[relative-resource-path]'
+        //devtoolModuleFilenameTemplate: "[absolute-resource-path]"
     },
     resolve: {
         extensions: [".js", '.ts']
@@ -39,11 +40,11 @@ module.exports = {
         {
             test: /\.fx$/,
             use: [{
-                loader: path.resolve('../Tools/WebpackShaderLoader/index.js')
+                loader: path.resolve(__dirname, '../Tools/WebpackShaderLoader/index.js')
             }]
         }]
     },
-    mode: "development",
+    mode: "production",
     devServer: {
         contentBase: path.join(__dirname, "dist"),
         compress: false,
@@ -54,10 +55,16 @@ module.exports = {
         new DtsBundleWebpack({
             name: "babylonjs-gui",
             main: path.resolve(__dirname, './dist/build/index.d.ts'),
-            out: path.resolve(__dirname, './dist/index.d.ts'),
+            out: path.resolve(__dirname, '../dist/preview release/gui/babylon.gui.module.d.ts'),
             baseDir: path.resolve(__dirname, './dist/build/'),
             headerText: "BabylonJS GUI"
-        })
-    ]
-}
-//]
+        }),
+        new webpack.WatchIgnorePlugin([
+            /\.js$/,
+            /\.d\.ts$/
+        ])
+    ],
+    watchOptions: {
+        ignored: [path.resolve(__dirname, './dist/**/*.*'), 'node_modules']
+    }
+}

inspector/webpack.config.js

@@ -1,7 +1,10 @@
+const path = require('path');
+
 module.exports = {
+    //context: __dirname,
     entry: [
-        "../../dist/preview release/inspector/babylon.inspector.css",
-        "../../dist/preview release/inspector/babylon.inspector.js"
+        path.resolve(__dirname, "../dist/preview release/inspector/babylon.inspector.css"),
+        path.resolve(__dirname, "../dist/preview release/inspector/babylon.inspector.js")
     ],
     output: {
         libraryTarget: "var",
@@ -14,7 +17,7 @@ module.exports = {
         }
     },
     module: {
-        loaders: [
+        rules: [
             { test: /\.css$/, use: ['style-loader', 'css-loader'] },
             {
                 test: /babylon.inspector.js/, use: [