Typo fixes for documentation and comments and webpack configuration directives are added in webpack.config

Signed-Off-By: Piyush Vijay <piyushvijay.1997@gmail.com>

doc/config.rst

@@ -217,8 +217,8 @@ Basic settings
 
     Setting this to ``true`` allows phpMyAdmin to be included inside a frame,
     and is a potential security hole allowing cross-frame scripting attacks or
-    clickjacking. Setting this to 'sameorigin' prevents phpMyAdmin to be 
-    included from another document in a frame, unless that document belongs 
+    clickjacking. Setting this to 'sameorigin' prevents phpMyAdmin to be
+    included from another document in a frame, unless that document belongs
     to the same domain.
 
 Server connection settings
@@ -3407,23 +3407,23 @@ Developer
     :type: string
     :default: `'production'`
 
-    Enable you to set the working environment for loading js files
+    Sets the working environment for loading JavaScript files for webpack development
+
+    Possible values are 'production' or 'development'
 
 .. config:option:: $cfg['webpack_host']
 
     :type: string
     :default: `'http://localhost'`
 
-    Enable you to start webpack development server on specified host for serving js files
-    when working in the development environment
+    Webpack development server hostname for serving JavaScript files. Requires $cfg['environment'] to be development.
 
 .. config:option:: $cfg['webpack_port']
 
     :type: number
     :default: 3307
 
-    Enable you to start webpack development server on specified port for serving js files
-    when working in the development environment
+    Webpack development server port for serving JavaScript files. Requires $cfg['environment'] to be development.
 
 .. config:option:: $cfg['DBG']
 

js/ajax.js

@@ -650,7 +650,7 @@ var AJAX = {
                 if (PMA_commonParams.get('environment') === 'development') {
                     script_src = PMA_commonParams.get('webpack_host') + ':'
                     + PMA_commonParams.get('webpack_port') + '/js/dist/';
-                } else if (PMA_commonParams.get('environment') === 'production') {
+                } else {
                     script_src = 'js/dist/';
                 }
                 script.src = script_src + name + '?' + 'v=' + encodeURIComponent(PMA_commonParams.get('PMA_VERSION'));

libraries/config.default.php

@@ -115,16 +115,19 @@ $cfg['blowfish_secret'] = '';
  * for development mode $cfg['environment'] = 'development',
  * for making production build $cfg['environment'] = 'production'
  *
+ * You will probably also have to modify the $cfg['CSPAllow'] directive
+ * in order to use the webpack development server.
+ *
  */
 $cfg['environment'] = 'production';
 
 /**
- * Webppack host for running development server of webpack
+ * Webpack host for running development server of webpack
  */
 $cfg['webpack_host'] = 'http://localhost';
 
 /**
- * Webppack port number for running development server of webpack
+ * Webpack port number for running development server of webpack
  */
 $cfg['webpack_port'] = 3307;
 
@@ -3032,9 +3035,9 @@ $cfg['LinkLengthLimit'] = 1000;
 /**
  * Additional string to allow in CSP headers.
  *
- * For working envionment to be development, this has to be changed to allow
- * cross-origin loading of js files for specified webpack host and webpack port.
- * Eg. 'http://localhost:3307 ws://localhost:3307' for locahost and 3307 webpack pot
+ * For working environment to be development, this has to be changed to allow
+ * cross-origin loading of JavaScript files for specified webpack host and webpack port.
+ * Eg. 'http://localhost:3307 ws://localhost:3307' for locahost and 3307 webpack port
  */
 $cfg['CSPAllow'] = '';
 

webpack.config.babel.js

@@ -1,17 +1,30 @@
 import path from 'path';
 import webpack from 'webpack';
 
-// let dev server port be 3307
+// environment either development or production
+var MODE = 'development';
+
+var WEBPACK_HOST = 'http://localhost';
+
+// port number of dev server
+// let dev server port be 3307
+var WEBPACK_PORT = 3307;
+
+var PUBLIC_PATH;
+
+if (MODE === 'development') {
+    PUBLIC_PATH = WEBPACK_HOST + ':' + WEBPACK_PORT + '/js/dist/';
+} else {
+    PUBLIC_PATH = 'js/dist/';
+}
 
-var mode = 'development';
 var module = {
     rules: [
         { test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/ }
     ]
 };
 var devServer = {
-    // port number of dev server
-    port: 3307,
+    port: WEBPACK_PORT,
     hot: false,
     headers: {
         'Access-Control-Allow-Origin': '*'
@@ -25,18 +38,16 @@ var plugins = [
 ];
 
 export default [{
-    // envionment either development or production
-    mode: mode,
+    mode: MODE,
     entry: {
         db_search_new: './js/src/db_search.js'
     },
     output: {
         filename: 'db_search_new.js',
-        path: path.resolve(__dirname, 'dist'),
-        publicPath: 'http://localhost:3307/js/dist'
+        path: path.resolve(__dirname, 'js/dist'),
+        publicPath: PUBLIC_PATH
     },
     module: module,
-    // devtool: 'source-map',
     resolve: {
         extensions: ['.js']
     },