Update for WebPack 4

Freegle · Oct 18, 2018 · bbc1cd8 · bbc1cd8
2 parents 04e5338 + 9f8d8dc
commit bbc1cd8
Show file tree

Hide file tree

Showing 77 changed files with 13,260 additions and 7,155 deletions.
diff --git a/client/appfd.js b/client/appfd.js
@@ -19,23 +19,23 @@ try {
     console.log("Storage exception", e);
 }
 
-import "smart-app-banner.css?a=1";
-import "bootstrap.min.css";
-import "bootstrap-theme.min.css";
-import "glyphicons.css";
-import "glyphicons-social.css";
-import "bootstrap-select.min.css";
-import "bootstrap-switch.min.css";
-import "bootstrap-dropmenu.min.css";
-import "bootstrap-notifications.min.css";
-import "eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css";
-import "dd.css";
-import "bootstrap-fileinput/css/fileinput.css";
+require("smart-app-banner.css?a=1");
+require("bootstrap.min.css");
+require("bootstrap-theme.min.css");
+require("glyphicons.css");
+require("glyphicons-social.css");
+require("bootstrap-select.min.css");
+require("bootstrap-switch.min.css");
+require("bootstrap-dropmenu.min.css");
+require("bootstrap-notifications.min.css");
+require("eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css");
+require("dd.css");
+require("bootstrap-fileinput/css/fileinput.css");
 
-import 'style.less';
-import 'user.css';
+require("style.less");
+require("user.css");
 
-import 'iznik/main';
+require("iznik/main");
 
 let iznikroot2 = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);
 iznikroot2 = decodeURI(iznikroot.replace(/%25/g, '%2525'));	// CC

diff --git a/client/appmt.js b/client/appmt.js
@@ -7,21 +7,21 @@ try {
     console.log("Storage exception", e);
 }
 
-import "smart-app-banner.css?a=1";
-import "bootstrap.min.css";
-import "bootstrap-theme.min.css";
-import "glyphicons.css";
-import "glyphicons-social.css";
-import "bootstrap-select.min.css";
-import "bootstrap-switch.min.css";
-import "bootstrap-dropmenu.min.css";
-import "bootstrap-notifications.min.css";
-import "eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css";
-import "dd.css";
-import "bootstrap-fileinput/css/fileinput.css";
+require("smart-app-banner.css?a=1");
+require("bootstrap.min.css");
+require("bootstrap-theme.min.css");
+require("glyphicons.css");
+require("glyphicons-social.css");
+require("bootstrap-select.min.css");
+require("bootstrap-switch.min.css");
+require("bootstrap-dropmenu.min.css");
+require("bootstrap-notifications.min.css");
+require("eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css");
+require("dd.css");
+require("bootstrap-fileinput/css/fileinput.css");
 
-import 'style.less';
-import 'modtools.css';
+require("style.less");
+require("modtools.css");
 
 import 'iznik/main';
 

diff --git a/client/fd-app.ejs b/client/fd-app.ejs
@@ -3,15 +3,34 @@
 <head>
     <meta charset="UTF-8">
     <title><%= SITE_NAME %></title>
+    <% if (MODTOOLS) { %>
     <script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
+    <% } %>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes, minimal-ui">
+    <script async src='https://www.google-analytics.com/analytics.js'></script>
+    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jekkhomlnoblcnangfcdohhaipmmaddc">
+    <meta name="google-site-verification" content="<%= GOOGLE_SITE_VERIFICATION %>" />
+    <link rel="preconnect" href="https://www.youtube.com">
+    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://apis.google.com">
+    <link rel="preconnect" href="https://adservice.google.com">
+    <link rel="preconnect" href="https://adservice.google.co.uk">
+    <link rel="preconnect" href="https://maps.googleapis.com">
+    <link rel="preconnect" href="https://apis.google.com">
+    <link rel="dns-prefetch" href="https://www.youtube.com">
+    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+    <link rel="dns-prefetch" href="https://apis.google.com">
+    <link rel="dns-prefetch" href="https://adservice.google.com">
+    <link rel="dns-prefetch" href="https://adservice.google.co.uk">
+    <link rel="dns-prefetch" href="https://maps.googleapis.com">
+    <link rel="dns-prefetch" href="https://apis.google.com">
 	<script src="cordova.js"></script>          <!-- CC phantom library, needed for Cordova api calls, added during build -->	
   <script src="xdk/init-dev.js"></script>     <!-- CC normalizes device and document ready events, see README for details -->
 </head>
 
 <body id="thebody">
-<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCdTSJKGWJUOx2pq1Y0f5in5g4kKAO5dgg&libraries=geometry,places,drawing,visualization"></script>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+<script async src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCdTSJKGWJUOx2pq1Y0f5in5g4kKAO5dgg&libraries=geometry,places,drawing,visualization"></script>
+<script ascyn type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
 <div itemscope itemtype="http://schema.org/Organization" style="display: none">
     <span itemprop="name"><%= SITE_NAME %></span>
@@ -30,9 +49,20 @@
 
 <script src="https://apis.google.com/js/client:plusone.js"></script>
 <script>
+
     // TODO This is an ignorant and outrageous hack, to get the gapi var to google.js.
-    var env = document.getElementById('thebody');
-    env.gapi = gapi;
+    function setGapi() {
+        var env = document.getElementById('thebody');
+
+        if (env) {
+            env.gapi = gapi;
+        } else {
+            console.log("Waiting for gapi");
+            window.setTimeout(setGapi, 100);
+        }
+    }
+
+    setGapi();
 </script>
 
 <script>

diff --git a/client/index.ejs b/client/index.ejs
@@ -11,6 +11,20 @@
     <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jekkhomlnoblcnangfcdohhaipmmaddc">
     <meta name="google-site-verification" content="<%= GOOGLE_SITE_VERIFICATION %>" />
+    <link rel="preconnect" href="https://www.youtube.com">
+    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://apis.google.com">
+    <link rel="preconnect" href="https://adservice.google.com">
+    <link rel="preconnect" href="https://adservice.google.co.uk">
+    <link rel="preconnect" href="https://maps.googleapis.com">
+    <link rel="preconnect" href="https://apis.google.com">
+    <link rel="dns-prefetch" href="https://www.youtube.com">
+    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+    <link rel="dns-prefetch" href="https://apis.google.com">
+    <link rel="dns-prefetch" href="https://adservice.google.com">
+    <link rel="dns-prefetch" href="https://adservice.google.co.uk">
+    <link rel="dns-prefetch" href="https://maps.googleapis.com">
+    <link rel="dns-prefetch" href="https://apis.google.com">
 </head>
 
 <body id="thebody">

diff --git a/client/mt-app.ejs b/client/mt-app.ejs
@@ -3,15 +3,34 @@
 <head>
     <meta charset="UTF-8">
     <title><%= SITE_NAME %></title>
+    <% if (MODTOOLS) { %>
     <script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>
+    <% } %>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=yes, minimal-ui">
+    <script async src='https://www.google-analytics.com/analytics.js'></script>
+    <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/jekkhomlnoblcnangfcdohhaipmmaddc">
+    <meta name="google-site-verification" content="<%= GOOGLE_SITE_VERIFICATION %>" />
+    <link rel="preconnect" href="https://www.youtube.com">
+    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://apis.google.com">
+    <link rel="preconnect" href="https://adservice.google.com">
+    <link rel="preconnect" href="https://adservice.google.co.uk">
+    <link rel="preconnect" href="https://maps.googleapis.com">
+    <link rel="preconnect" href="https://apis.google.com">
+    <link rel="dns-prefetch" href="https://www.youtube.com">
+    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+    <link rel="dns-prefetch" href="https://apis.google.com">
+    <link rel="dns-prefetch" href="https://adservice.google.com">
+    <link rel="dns-prefetch" href="https://adservice.google.co.uk">
+    <link rel="dns-prefetch" href="https://maps.googleapis.com">
+    <link rel="dns-prefetch" href="https://apis.google.com">
 	<script src="cordova.js"></script>          <!-- CC phantom library, needed for Cordova api calls, added during build -->	
   <script src="xdk/init-dev.js"></script>     <!-- CC normalizes device and document ready events, see README for details -->
 </head>
 
 <body id="thebody">
-<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCdTSJKGWJUOx2pq1Y0f5in5g4kKAO5dgg&libraries=geometry,places,drawing,visualization"></script>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+<script async src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCdTSJKGWJUOx2pq1Y0f5in5g4kKAO5dgg&libraries=geometry,places,drawing,visualization"></script>
+<script ascyn type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
 <div itemscope itemtype="http://schema.org/Organization" style="display: none">
     <span itemprop="name"><%= SITE_NAME %></span>
@@ -30,14 +49,24 @@
 
 <script src="https://apis.google.com/js/client:plusone.js"></script>
 <script>
+
     // TODO This is an ignorant and outrageous hack, to get the gapi var to google.js.
-    var env = document.getElementById('thebody');
-    env.gapi = gapi;
+    function setGapi() {
+        var env = document.getElementById('thebody');
+
+        if (env) {
+            env.gapi = gapi;
+        } else {
+            console.log("Waiting for gapi");
+            window.setTimeout(setGapi, 100);
+        }
+    }
+
+    setGapi();
 </script>
 
 <script>
 	var iznikroot = location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1);	// CC
-	console.log(iznikroot);
 	iznikroot = decodeURI(iznikroot.replace(/%25/g, '%2525'));	// CC
 	console.log("iznikroot " + iznikroot);
 </script>

diff --git a/dev/postcss.config.js b/dev/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+    parser: 'sugarss',
+    plugins: {
+        'postcss-import': {},
+        'postcss-preset-env': {},
+        'cssnano': {}
+    }
+}
diff --git a/dev/webpack.appfd.config.js b/dev/webpack.appfd.config.js
@@ -1,6 +1,8 @@
+//  mode: 'development', rather than 'production' to not minify
+
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 // CC const FaviconsPlugin = require('favicons-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 // CC const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const webpack = require('webpack');
 const { Config } = require('webpack-config');
@@ -35,21 +37,23 @@ module.exports = new Config().extend({
         return config;
     }
   }).merge({
+  //mode: 'development',
+  mode: 'production',
   // CC devtool: 'source-map',
   entry: [join(ROOT, 'client/appfd.js')],
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: {
+        use: [
+          'style-loader',
+          {
             loader: 'css-loader',
             options: {
               root: '../'
             }
           }
-        })
+        ]
       }
     ]
   },
@@ -64,12 +68,12 @@ module.exports = new Config().extend({
       statsOptions: null,
       logLevel: 'info'
     }),*/
-    new ExtractTextPlugin({
-      filename: 'css/[name].[contenthash].css'
+    new MiniCssExtractPlugin({
+      filename: "[name].[chunkhash].css"
     }),
     // CC new FaviconsPlugin('images/user_logo.png'),
     new webpack.DefinePlugin({
-      APP_VERSION: JSON.stringify('1.4.4, 6 October 2018'),
+      APP_VERSION: JSON.stringify('1.4.5, 18 October 2018'),
       // CC SET ABOVE: API: JSON.stringify(BASE_URL+'/api/'),
       FACEBOOK_APPID: JSON.stringify('134980666550322'),
       FACEBOOK_GRAFFITI_APPID: JSON.stringify('115376591981611'),
@@ -100,16 +104,16 @@ module.exports = new Config().extend({
       new CopyWebpackPlugin([
           {from: 'http/xdk', to: 'xdk'}
       ]),
-    new webpack.optimize.UglifyJsPlugin({
+    /*new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
       minimize: true,
       compress: {
         warnings: false
       }
-    }),
+    }),*/
 
     // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
+    /*new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks: function(module, count) {
         // any required modules inside node_modules are extracted to vendor
@@ -136,7 +140,7 @@ module.exports = new Config().extend({
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor']
-    }),
+    }),*/
 
     // do scope hoisting: https://webpack.js.org/plugins/module-concatenation-plugin
     // should reduce scripting time and bundle size