diff --git a/.scrutinizer.yml b/.scrutinizer.yml
index 32dc524562f9..1c8e82b659f3 100644
--- a/.scrutinizer.yml
+++ b/.scrutinizer.yml
@@ -12,6 +12,7 @@ build:
         test:
             environment:
                 php: 7.1
+                node: '8.11.3'
             dependencies:
                 before:
                     - composer install
@@ -24,4 +25,4 @@ build:
                         command: './vendor/bin/phpcs  --standard=PMAStandard ./ --report=checkstyle --report-file=cs-data --ignore=*/vendor/*,*/build/*'
                         analysis:
                             file: 'cs-data'                 # The reporter filename
-                            format: 'php-cs-checkstyle'     # The supported format by Scrutinizer
+                            format: 'php-cs-checkstyle'     # The supported format by Scrutinizer
\ No newline at end of file
diff --git a/js/ajax.js b/js/ajax.js
index f484d522a7f2..43c1b3dcfcbb 100644
--- a/js/ajax.js
+++ b/js/ajax.js
@@ -639,7 +639,20 @@ var AJAX = {
             var self = this;
 
             script.type = 'text/javascript';
-            script.src = 'js/' + name + '?' + 'v=' + encodeURIComponent(PMA_commonParams.get('PMA_VERSION'));
+            /* new directory */
+            var check = name.split('_');
+            if (check[check.length - 1] === 'new') {
+                var script_src = '';
+                if (PMA_commonParams.get('environment') === 'development') {
+                    script_src += 'http://localhost:' + PMA_commonParams.get('webpack_port') + '/js/dist/';
+                } else if (PMA_commonParams.get('environment') === 'production') {
+                    script_src = 'js/dist/';
+                }
+                script.src = script_src + name + '?' + 'v=' + encodeURIComponent(PMA_commonParams.get('PMA_VERSION'));
+            } else {
+                script.src = 'js/' + name + '?' + 'v=' + encodeURIComponent(PMA_commonParams.get('PMA_VERSION'));
+            }
+            /* new directory */
             script.async = false;
             script.onload = function () {
                 self.done(name, callback);
diff --git a/libraries/classes/Header.php b/libraries/classes/Header.php
index f2a0d82f6832..760178ff6e96 100644
--- a/libraries/classes/Header.php
+++ b/libraries/classes/Header.php
@@ -164,6 +164,7 @@ public function __construct()
     private function _addDefaultScripts(): void
     {
         // Localised strings
+
         $this->_scripts->addFile('vendor/jquery/jquery.min.js');
         $this->_scripts->addFile('vendor/jquery/jquery-migrate.js');
         $this->_scripts->addFile('whitelist.php');
@@ -180,6 +181,11 @@ private function _addDefaultScripts(): void
         $this->_scripts->addFile('vendor/jquery/jquery.debounce-1.0.5.js');
         $this->_scripts->addFile('menu_resizer.js');
 
+        // Here would not be a good place to add CodeMirror because
+        // the user preferences have not been merged at this point
+
+        $this->_scripts->addFile('messages.php', array('l' => $GLOBALS['lang']));
+
         // Cross-framing protection
         if ($GLOBALS['cfg']['AllowThirdPartyFraming'] === false) {
             $this->_scripts->addFile('cross_framing_protection.js');
@@ -191,10 +197,6 @@ private function _addDefaultScripts(): void
             $this->_scripts->addFile('error_report.js');
         }
 
-        // Here would not be a good place to add CodeMirror because
-        // the user preferences have not been merged at this point
-
-        $this->_scripts->addFile('messages.php', ['l' => $GLOBALS['lang']]);
         // Append the theme id to this url to invalidate
         // the cache on a theme change. Though this might be
         // unavailable for fatal errors.
@@ -233,6 +235,8 @@ public function getJsParams(): array
             ? $_SESSION['tmpval']['pftext'] : '';
 
         $params = [
+            'environment' => $GLOBALS['cfg']['environment'],
+            'webpack_port' => $GLOBALS['cfg']['webpack_port'],
             'common_query' => Url::getCommonRaw(),
             'opendb_url' => Util::getScriptNameForOption(
                 $GLOBALS['cfg']['DefaultTabDatabase'],
diff --git a/libraries/classes/Scripts.php b/libraries/classes/Scripts.php
index a9d296afda06..fc2d26a65572 100644
--- a/libraries/classes/Scripts.php
+++ b/libraries/classes/Scripts.php
@@ -51,8 +51,18 @@ private function _includeFiles(array $files)
             if (strpos($value['filename'], ".php") !== false) {
                 $file_name = $value['filename'] . Url::getCommon($value['params'] + ['v' => PMA_VERSION]);
                 $result .= "<script data-cfasync='false' "
-                    . "type='text/javascript' src='http://localhost:3307/js/dist/" . $file_name
+                    . "type='text/javascript' src='js/" . $file_name
                     . "'></script>\n";
+            } else if (strpos($value['filename'], "_new") !== false) {
+                /* new directory */
+                if ($GLOBALS['cfg']['environment'] === 'development') {
+                    $src = "http://localhost:" . $GLOBALS['cfg']['webpack_port'] . "/";
+                } else if ($GLOBALS['cfg']['environment'] === 'production'){
+                    $src = "";
+                }
+                $result .= '<script data-cfasync="false" type="text/javascript" src="' . $src . 'js/dist/'
+                    .  $value['filename'] . '?' . Header::getVersionParameter() . '"></script>' . "\n";
+                /* new directory */
             } else {
                 $result .= '<script data-cfasync="false" type="text/javascript" src="js/'
                     . $value['filename'] . '?' . Header::getVersionParameter() . '"></script>' . "\n";
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index c82ce9976417..c24d9a7ff9f7 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -9,13 +9,10 @@ var module = {
         { test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/ }
     ]
 };
-var resolve = {
-    extensions: ['.js']
-};
 var devServer = {
     // port number of dev server
     port: 3307,
-    // hot: true,
+    hot: false,
     headers: {
         'Access-Control-Allow-Origin': '*'
     }
@@ -24,7 +21,7 @@ var plugins = [
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NamedModulesPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
 ];
 
 export default [{
@@ -40,29 +37,9 @@ export default [{
     },
     module: module,
     // devtool: 'source-map',
-    resolve: resolve,
-    devServer: devServer,
-    plugins: plugins
-},
-{
-    // envionment either development or production
-    mode: 'development',
-    entry: {
-        pma_common_params: './js/src/global/pma_common_params',
-        ajax_global: './js/src/global/ajax_global.js',
-        jQuery: './js/src/global/jquery.js'
+    resolve: {
+        extensions: ['.js']
     },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, 'js/dist/global'),
-        // url on which dev server will run
-        publicPath: 'http://localhost:3007/js/dist/global/',
-        library: '[name]',
-        libraryTarget: 'umd'
-    },
-    module: module,
-    // devtool: 'source-map',
-    resolve: resolve,
     devServer: devServer,
     plugins: plugins
 }];