GUACAMOLE-773: Use Webpack rather than Webpack+Gulp.

guacamole/src/main/frontend/webpack.config.js

@@ -17,54 +17,150 @@
  * under the License.
  */
 
-const webpack = require('webpack');
+const AngularTemplateCacheWebpackPlugin = require('angular-templatecache-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const ClosureWebpackPlugin = require('closure-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
 
 module.exports = {
 
     bail: true,
     mode: 'production',
+    stats: 'minimal',
 
     output: {
         path: __dirname + '/dist',
-        filename: 'guacamole.min.js'
+        filename: 'guacamole.[contenthash].js',
     },
 
-    // Generate source maps, automatically building off any source maps
-    // generated by Gulp
+    // Generate source maps
     devtool: 'source-map',
+
+    // Entry point for the Guacamole webapp is the "index" AngularJS module
+    entry: './src/app/index/indexModule.js',
+
     module: {
         rules: [
+
+            // Automatically extract imported CSS for later reference within separate CSS file
             {
-                test: /\.js$/,
-                enforce: 'pre',
-                use: [ 'source-map-loader' ]
+                test: /\.css$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            import: false,
+                            url: false
+                        }
+                    }
+                ]
+            },
+
+            /*
+             * Necessary to be able to use angular 1 with webpack as explained in https://github.com/webpack/webpack/issues/2049
+             */
+            {
+                test: require.resolve('angular'),
+                loader: 'exports-loader',
+                options: {
+                    type: 'commonjs',
+                    exports: 'single window.angular'
+                }
             }
+
         ]
     },
+    optimization: {
+        minimizer: [
 
-    // Automatically require used modules
+            // Minify using Google Closure Compiler
+            new ClosureWebpackPlugin({ mode: 'STANDARD' }, {
+                languageIn: 'ECMASCRIPT6',
+                languageOut: 'ECMASCRIPT5',
+                compilationLevel: 'SIMPLE'
+            }),
+
+            new CssMinimizerPlugin()
+
+        ],
+        splitChunks: {
+            cacheGroups: {
+
+                // Bundle CSS as one file
+                styles: {
+                    name: 'styles',
+                    test: /\.css$/,
+                    chunks: 'all',
+                    enforce: true
+                }
+
+            }
+        }
+    },
     plugins: [
+
+        new AngularTemplateCacheWebpackPlugin({
+            module: 'templates-main',
+            root: 'app/',
+            source: 'src/app/**/*.html',
+            standalone: true
+        }),
+
+        // Automatically clean out dist/ directory
+        new CleanWebpackPlugin(),
+
+        // Copy static files to dist/
+        new CopyPlugin([
+            { from: 'fonts/**/*' },
+            { from: 'images/**/*' },
+            { from: 'translations/**/*' }
+        ], {
+            context: 'src/'
+        }),
+
+        // Copy core libraries for global inclusion
+        new CopyPlugin([
+            { from: 'angular/angular.min.js' },
+            { from: 'jquery/dist/jquery.min.js' },
+            { from: 'lodash/lodash.min.js' }
+        ], {
+            context: 'node_modules/'
+        }),
+
+        // Generate index.html from template
+        new HtmlWebpackPlugin({
+            inject: false,
+            template: 'src/index.html'
+        }),
+
+        // Extract CSS from Webpack bundle as separate file
+        new MiniCssExtractPlugin({
+            filename: 'guacamole.[contenthash].css',
+            chunkFilename: '[id].guacamole.[contenthash].css'
+        }),
+
+        // Automatically require used modules
         new webpack.ProvidePlugin({
-            $: 'jquery',
-            _: 'lodash',
-            angular: 'angular',
             jstz: 'jstz',
             Pickr: '@simonwep/pickr',
             saveAs: 'file-saver'
         })
-    ],
 
-    // Minify using Google Closure Compiler
-    optimization: {
-        minimizer: [
-            new ClosureWebpackPlugin({ mode: 'STANDARD' }, {
-                externs: 'externs.js',
-                languageIn: 'ECMASCRIPT6',
-                languageOut: 'ECMASCRIPT5',
-                compilationLevel: 'ADVANCED'
-            })
+    ],
+    resolve: {
+
+        // Include Node modules and base source tree within search path for
+        // import/resolve
+        modules: [
+            'src',
+            'node_modules'
         ]
+
     }
 
 };