webpack 4 upgrade

Issue-ID: SDC-1388
Change-Id: I44d61491ef802187baa4beb3b4fc2c9f1e8405e5
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>

1 files changed, 145 insertions, 59 deletions

diff --git a/openecomp-ui/webpack.config.js b/openecomp-ui/webpack.config.js
index a8910ff733..8cceb9bb92 100644
--- a/openecomp-ui/webpack.config.js
+++ b/openecomp-ui/webpack.config.js
@@ -1,67 +1,153 @@
 'use strict';
 
 const path = require('path');
-const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { DefinePlugin, HotModuleReplacementPlugin } = require('webpack');
+
+const devConfig = require('./tools/getDevConfig');
 const proxyServer = require('./proxy-server');
+const fs = require('fs');
 
-let localDevConfig = {};
-try {
-	localDevConfig = require('./devConfig');
-} catch (e) {}
-let devConfig = Object.assign({}, require('./devConfig.defaults'), localDevConfig);
 let devPort = process.env.PORT || devConfig.port;
+let publicPath = 'http://localhost:' + devPort + '/onboarding/';
 
-let webpackCommon = require('./webpack.common');
-
-function getEntrySources(sources) {
-	for (let i in sources) {
-		if (sources.hasOwnProperty(i)) {
-			sources[i].push('react-hot-loader/patch');
-			sources[i].push('webpack-dev-server/client?http://localhost:' + devPort);
-			sources[i].push('webpack/hot/only-dev-server');
-		}
-	}
-	return sources;
-}
-
-let webpackDevConfig = Object.assign({}, webpackCommon, {
-	entry: getEntrySources(devConfig.bundles),
-	devtool: 'eval-source-map',
-	output: {
-		path: path.join(__dirname, 'dist'),
-		publicPath: `http://localhost:${devPort}/onboarding/`,
-		filename: '[name].js'
-	},
-	devServer: {
-		port: devPort,
-		historyApiFallback: true,
-		publicPath: `http://localhost:${devPort}/onboarding/`,
-		contentBase: path.join(__dirname, 'dist'),
-		inline: true,
-		hot: true,
-		stats: {
-			colors: true,
-			exclude: ['node_modules']
-		},
-		before: proxyServer
-	},
-	plugins: [
-		new webpack.DefinePlugin({
-			DEV: true,
-			DEBUG: true
-		}),
-		new webpack.HotModuleReplacementPlugin(),
-		new webpack.LoaderOptionsPlugin({
-			options: {
-				eslint: {
-					configFile: './.eslintrc',
-					emitError: true,
-					emitWarning: true
-				},
-				context: '/'
-			}
-		})
-	]
-});
+module.exports = (env, argv) => {
+    let DEV = argv.mode && argv.mode === 'development';
+    let language = null;
+    if (
+        env === undefined ||
+        env.language === undefined ||
+        env.language === ''
+    ) {
+        console.log('Setting language to default "en".');
+        language = 'en';
+    } else {
+        language = env.language;
+        console.log('Setting language to  "' + env.language + '".');
+    }
 
-module.exports = webpackDevConfig;
+    var webpackConfig = {
+        entry: {
+            'punch-outs': ['sdc-app/punch-outs.js']
+        },
+        cache: true,
+        devtool: DEV ? 'eval-source-map' : undefined,
+        performance: { hints: false },
+        resolve: {
+            modules: [path.resolve('.'), path.join(__dirname, 'node_modules')],
+            alias: {
+                i18nJson: 'nfvo-utils/i18n/' + language + '.json',
+                'nfvo-utils': 'src/nfvo-utils',
+                'nfvo-components': 'src/nfvo-components',
+                'sdc-app': 'src/sdc-app',
+                // TODO - this is needed for heatValidation standalone. Can be deprecated down the line
+                'react-select/dist/': 'node_modules' + '/react-select/dist/'
+            }
+        },
+        output: {
+            path: path.join(__dirname, 'dist'),
+            publicPath: DEV ? publicPath : '/onboarding/',
+            filename: DEV ? '[name].js' : '[name]_' + language + '.js'
+        },
+        module: {
+            rules: [
+                {
+                    enforce: 'pre',
+                    test: /\.(js|jsx)$/,
+                    include: path.resolve(__dirname, 'src'),
+                    use: [{ loader: 'eslint-loader' }]
+                },
+                {
+                    test: /\.(js|jsx)$/,
+                    include: path.resolve(__dirname, 'src'),
+                    use: [{ loader: 'babel-loader' }]
+                },
+                {
+                    test: /\.(js|jsx)$/,
+                    loader: 'source-map-loader',
+                    include: path.resolve(__dirname, 'src'),
+                    enforce: 'pre'
+                },
+                {
+                    test: /\.(css|scss)$/,
+                    use: [
+                        {
+                            loader: 'style-loader'
+                        },
+                        {
+                            loader: 'css-loader'
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                output: { path: path.join(__dirname, 'dist') }
+                            }
+                        }
+                    ],
+                    include: [
+                        /resources/,
+                        path.join(
+                            __dirname,
+                            'node_modules/dox-sequence-diagram-ui/'
+                        ),
+                        path.join(__dirname, 'node_modules/react-datepicker/'),
+                        path.join(__dirname, 'node_modules/react-select/'),
+                        path.join(__dirname, 'node_modules/sdc-ui/')
+                    ]
+                },
+                {
+                    test: /\.(svg)(\?.*)?$/,
+                    loader: 'url-loader',
+                    options: {
+                        limit: 16384,
+                        mimetype: 'image/svg+xml'
+                    },
+                    include: [
+                        path.join(
+                            __dirname,
+                            'node_modules/dox-sequence-diagram-ui/'
+                        ),
+                        path.join(__dirname, 'node_modules/sdc-ui/')
+                    ]
+                }
+            ]
+        },
+        plugins: DEV
+            ? [
+                  new CleanWebpackPlugin(['dist'], { watch: false }),
+                  new DefinePlugin({
+                      DEBUG: DEV === true,
+                      DEV: DEV === true
+                  }),
+                  new HotModuleReplacementPlugin()
+              ]
+            : [
+                  new DefinePlugin({
+                      DEBUG: DEV === true,
+                      DEV: DEV === true
+                  })
+              ]
+    };
+    if (DEV) {
+        webpackConfig.entry['punch-outs'].push('react-hot-loader/patch');
+        webpackConfig.entry['punch-outs'].push(
+            'webpack-dev-server/client?http://localhost:' + devPort
+        );
+        webpackConfig.entry['punch-outs'].push('webpack/hot/only-dev-server');
+        webpackConfig.devServer = {
+            port: devPort,
+            historyApiFallback: true,
+            publicPath: publicPath,
+            contentBase: path.join(__dirname, 'dist'),
+            inline: true,
+            hot: true,
+            stats: {
+                colors: true,
+                exclude: [path.join(__dirname, 'node_modules')]
+            },
+            before: proxyServer
+        };
+    }
+    console.log('Running build for : ' + argv.mode);
+    return webpackConfig;
+};