NEW: webpack code splitting

README.md

@@ -16,7 +16,7 @@
 
 [✘] TODO Parametrizzare nel file LABEL.INI i parametri del BlinkSpecial
 
-[✘] TODO creare la classe wrapper Configuration, serve per leggere più velocemente i parametri dai file INI e nel caso manchino uno o l'intero file INI, a creare dei defaults
+[✘] TODO creare la classe wrapper Configuration, serve per leggere più velocemente i parametri dai file INI e nel caso ne manchi uno o l'intero file INI, a creare dei defaults
 
 [✘] TODO dashboard OMLink: aggiungere "display_refresh" con tempo in minuti; aggiungere l'import dei template da omlink di template prima esportati da Findbox
 

package.json

@@ -1,13 +1,12 @@
 {
 	"name": "OM-Link",
-	"projectname": "omlink",
 	"version": "1.9.7",
 	"private": true,
 	"description": "OM-Link Engine",
 	"author": "Open Mind",
 	"scripts": {
 		"clean": "shx --silent rm -rf deploy.tar.gz tmp node_modules ui/admin/node_modules src_minified assets/frontend assets/admin Site.log cfg/*.old ui/*/masterpage.tpl fbtpl *.tgz",
-		"postinstall": "node postinstall.js",
+		"postinstall": "node scripts/postinstall.js",
 		"buildDev": "webpack --mode=none --display-error-details",
 		"buildProd": "webpack --mode=production --display-error-details",
 		"watch": "webpack --mode=none --display-error-details --watch",

postinstall.js

@@ -1,9 +0,0 @@
-const fs = require('fs');
-const {execSync} = require('child_process')
-
-let packageJson = JSON.parse(fs.readFileSync('package.json'));
-
-let globalModules = packageJson.globalDependencies.join(' ');
-
-execSync(`npm i -g ${globalModules}`);
-execSync(`npm link ${globalModules}`);

scripts/postinstall.js

@@ -0,0 +1,14 @@
+"use strict";
+
+const fs = require('fs');
+const {execSync} = require('child_process');
+
+let packageJson = JSON.parse(fs.readFileSync('package.json'));
+
+let missingPackages = packageJson.globalDependencies.filter(moduleName => !fs.existsSync(`node_modules/${moduleName}/package.json`));
+
+if (missingPackages.length > 0) {
+	let packageToLink = packageJson.globalDependencies.join(' ');
+
+	execSync(`npm link ${packageToLink}`);
+}

ui/admin/assets/js/admin.js

@@ -1,6 +1,8 @@
 import {ModalEslDetails} from "./ModalEslDetails";
 import * as OMGUtils from "./OMGUtils";
 
+const DT_COLUMN = 5;
+
 let modalEslDetails = null;
 
 function SaveConfig() {
@@ -62,10 +64,9 @@ function TemplateSelector(clearCache) {
 
 	$('.templateselector').on('show.bs.modal', function (e) {
 		let selectedRows = $('#datatable').DataTable().rows({selected: true}).data().toArray();
-		let dt_columns = selectedRows.map(v => v[5]);
+		let dt_columns = selectedRows.map(v => v[DT_COLUMN]);
 		let jsonData = JSON.stringify(dt_columns);
 
-		console.log(selectedRows.length);
 		if (selectedRows.length == 0) {
 			toastr.warning('Nessuna label selezionata');
 			e.preventDefault();

ui/admin/package.json

@@ -6,7 +6,6 @@
 	"description": "OM-Link Admin Module",
 	"author": "Open Mind",
 	"scripts": {
-		"postinstall": "node ../../postinstall.js",
 		"buildDev": "webpack --mode=none --display-error-details",
 		"buildProd": "webpack --mode=production --display-error-details",
 		"watch": "webpack --mode=none --display-error-details --watch"

ui/admin/templates.tpl

@@ -10,4 +10,4 @@
 
 	</repeat>
 
-</div>
+</div>

ui/admin/webpack.config.js

@@ -6,13 +6,19 @@ const CleanWebpackPlugin = require("clean-webpack-plugin/dist/clean-webpack-plug
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpack = require("webpack");
 
+function getCurrentProjectname() {
+	let pathSplit = __dirname.split(path.sep);
+
+	return pathSplit[pathSplit.length - 3];
+}
+
 module.exports = {
 	plugins: [
 		new CleanWebpackPlugin(),
 		new HtmlPlugin(
 			{
 				template: "masterpage_template.tpl",
-				filename: path.resolve(__dirname, 'masterpage.tpl'),
+				filename: path.resolve(__dirname, 'masterpage.tpl')
 			}
 		),
 		new MiniCssExtractPlugin({filename: "styles.[contenthash].css"}),
@@ -54,7 +60,7 @@ module.exports = {
 	entry: "./assets/js/index.js",
 	output:
 		{
-			publicPath: '/' + process.env.npm_package_projectname + '/assets/admin/',
+			publicPath: '/' + getCurrentProjectname() + '/assets/admin/',
 			path: path.resolve(__dirname, "../../assets/admin/"),
 			filename: "bundle.[contenthash].js"
 		}

ui/frontend/js/index.js → ui/frontend/js/common.js

@@ -1,6 +1,7 @@
+// Libs
 import 'bootstrap';
 import 'popper.js';
-import './app.js';
 
+// CSS
 import 'bootstrap/dist/css/bootstrap.min.css';
 import '../css/omlink.scss';

ui/frontend/js/app.js → ui/frontend/js/frontend.js

@@ -6,6 +6,8 @@
  * @time 17:42
  */
 
+import './common';
+
 let CUSTOM_NOTIFY = 0x4000;
 let REFRESH_FILTERS = CUSTOM_NOTIFY + 1;
 
@@ -69,9 +71,6 @@ function refreshNotificationArea() {
 		})
 		.then(data => {
 			NotificationBuilder(data.notify);
-		})
-		.catch(err => {
-			console.log(err);
 		});
 }
 

webpack.config.js

@@ -6,6 +6,12 @@ const CleanWebpackPlugin = require("clean-webpack-plugin");
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpack = require("webpack");
 
+function getCurrentProjectname() {
+	let pathSplit = __dirname.split(path.sep);
+
+	return pathSplit[pathSplit.length - 1];
+}
+
 module.exports = {
 	plugins: [
 		new CleanWebpackPlugin(),
@@ -13,12 +19,14 @@ module.exports = {
 			{
 				template: "./ui/frontend/errors_template.tpl",
 				filename: path.resolve(__dirname, './ui/frontend/errors.tpl'),
+				chunks: ["frontend"]
 			}
 		),
 		new HtmlPlugin(
 			{
 				template: "./ui/frontend/masterpage_template.tpl",
 				filename: path.resolve(__dirname, './ui/frontend/masterpage.tpl'),
+				chunks: ["frontend"]
 			}
 		),
 		new MiniCssExtractPlugin({filename: "styles.[contenthash].css"}),
@@ -56,10 +64,12 @@ module.exports = {
 			)
 		],
 	},
-	entry: "./ui/frontend/js/index.js",
+	entry: {
+		"frontend": "./ui/frontend/js/frontend.js"
+	},
 	output: {
-		publicPath: '/' + process.env.npm_package_projectname + '/assets/frontend/',
+		publicPath: '/' + getCurrentProjectname() + '/assets/frontend/',
 		path: path.resolve(__dirname, "assets/frontend/"),
-		filename: "bundle.[contenthash].js"
+		filename: "[name].[contenthash].js"
 	},
 };