NEW: moved from old build.js to webpack 4

.gitignore

@@ -59,3 +59,4 @@ bundle.css
 /cfg/*.bin
 /src/OpenMind/Admin/ui/assets/build
 /fbtpl
+masterpage.tpl

build.js

@@ -1,50 +0,0 @@
-const compressor = require('node-minify');
-const sass = require('node-sass');
-const {writeFileSync} = require('fs');
-const {execSync} = require('child_process');
-
-// The Libraries to join in minified files
-const libList = [
-  "node_modules/jquery/dist/jquery.min.js",
-  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
-];
-
-// The css files to minify
-const cssList = [
-  "node_modules/bootstrap/dist/css/bootstrap.min.css",
-  "ui/css/omlink.css"
-];
-
-// The javascript files to minify
-const jsList = [
-  "ui/js/omlink.js"
-];
-
-/**
- * MAIN
- */
-
-let buffer = sass.renderSync({file: 'ui/css/omlink.scss'});
-
-writeFileSync('ui/css/omlink.css', buffer.css);
-
-compressor.minify({
-    compressor: 'clean-css',
-    input: cssList,
-    output: 'bundle.css'
-  }
-);
-
-compressor.minify({
-    compressor: 'uglify-js',
-    input: jsList,
-    output: 'ui/js/omlink.min.js'
-  }
-);
-
-compressor.minify({
-    compressor: 'no-compress',
-    input: [].concat(libList, ["ui/js/omlink.min.js"]),
-    output: 'bundle.js'
-  }
-);

package.json

@@ -1,20 +1,32 @@
 {
-  "name": "OM-Link",
-  "version": "1.8.2",
-  "private": true,
-  "description": "OM-Link Engine",
-  "scripts": {
-    "clean": "shx rm -rf tmp bundle.css bundle.js ui/css/omlink.css ui/css/omlink.css.map ui/js/omlink.min.js node_modules src_minified Site.log cfg/*.bin",
-    "build": "node build.js",
-    "deploy": "zip -x ui/css/* ui/js/* -9 -r deploy.zip omlink.sql lib cfg/config_prod.bin cfg/labels.ini index.php bundle.* src_minified ui"
-  },
-  "author": "Open Mind",
-  "dependencies": {
-    "bootstrap": "^4.3.1",
-    "jquery": "^3.4.0",
-    "node-minify": "^3.6.0",
-    "node-sass": "^4.11.0",
-    "popper.js": "^1.15.0",
-    "terser": "^3.17.0"
-  }
+	"name": "OM-Link",
+	"version": "1.9.0",
+	"private": true,
+	"description": "OM-Link Engine",
+	"scripts": {
+		"clean": "shx rm -rf tmp node_modules src_minified Site.log cfg/*.bin ui/dist ui/masterpage.tpl",
+		"build": "webpack --config webpack.config.js --display-error-details",
+		"watch": "webpack --config webpack.config.js --display-error-details --watch",
+		"deploy": "zip -x ui/css/* ui/js/* -9 -r deploy.zip omlink.sql lib cfg/config_prod.bin cfg/labels.ini index.php bundle.* src_minified ui"
+	},
+	"author": "Open Mind",
+	"devDependencies": {
+		"acorn": "^6.1.1",
+		"clean-webpack-plugin": "^2.0.1",
+		"css-loader": "^2.1.1",
+		"html-webpack-plugin": "^3.2.0",
+		"mini-css-extract-plugin": "^0.6.0",
+		"node-sass": "^4.12.0",
+		"optimize-css-assets-webpack-plugin": "^5.0.1",
+		"sass-loader": "^7.1.0",
+		"style-loader": "^0.23.1",
+		"terser": "^3.17.0",
+		"webpack": "^4.30.0",
+		"webpack-cli": "^3.3.1"
+	},
+	"dependencies": {
+		"bootstrap": "^4.3.1",
+		"jquery": "^3.4.0",
+		"popper.js": "^1.15.0"
+	}
 }

src/OpenMind/Admin/build.js

@@ -18,18 +18,18 @@ const path = require('path');
  * @returns {string[]}
  */
 function LoadListIntoArray(listFileName) {
-  // Split every line into array
-  let listTemp = fs.readFileSync(listFileName).toString().split("\n");
+	// Split every line into array
+	let listTemp = fs.readFileSync(listFileName).toString().split("\n");
 
-  // Clean array:
-  let listRet = listTemp.filter((x) => {
-    // remove all comments start with ';' and empty lines ('\r')
-    return x.replace(/^;.*/, '').replace('\r', '').length > 0
-  }).map((d) => {
-    return d.replace('\r', '')
-  });
+	// Clean array:
+	let listRet = listTemp.filter((x) => {
+		// remove all comments start with ';' and empty lines ('\r')
+		return x.replace(/^;.*/, '').replace('\r', '').length > 0
+	}).map((d) => {
+		return d.replace('\r', '')
+	});
 
-  return listRet;
+	return listRet;
 }
 
 /**
@@ -37,8 +37,8 @@ function LoadListIntoArray(listFileName) {
  */
 
 if (!fs.existsSync(BUILD_PATH)) {
-  console.log(`Create folder ${BUILD_PATH}`);
-  fs.mkdirSync(BUILD_PATH);
+	console.log(`Create folder ${BUILD_PATH}`);
+	fs.mkdirSync(BUILD_PATH);
 }
 
 let libList = LoadListIntoArray('build.js.list');
@@ -57,10 +57,10 @@ fs.writeFileSync(`${BUILD_PATH}/admin.min.css`, buffer.css);
 //Concatenate all CSS in one MIN.CSS file
 console.log('Bundle CSS');
 compressor.minify({
-    compressor: 'clean-css',
-    input: cssList,
-    output: `${BUILD_PATH}/bundle.min.css`
-  }
+		compressor: 'clean-css',
+		input: cssList,
+		output: `${BUILD_PATH}/bundle.min.css`
+	}
 );
 
 /**
@@ -70,10 +70,10 @@ compressor.minify({
 // Minify+Concatenate JS files it in one file
 console.log('Bundle JS');
 compressor.minify({
-    compressor: 'terser',
-    input: libList,
-    output: `${BUILD_PATH}/bundle.min.js`
-  }
+		compressor: 'terser',
+		input: libList,
+		output: `${BUILD_PATH}/bundle.min.js`
+	}
 );
 
 fs.unlinkSync(`${BUILD_PATH}/admin.min.css`);

ui/css/omlink.scss

@@ -45,7 +45,7 @@ body {
 	font-family: 'Roboto';
 	font-style: normal;
 	font-weight: 400;
-	src: local('Roboto'), local('Roboto-Regular'), url('ui/fonts/Roboto-Regular.ttf') format('truetype');
+	src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype');
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
@@ -56,7 +56,7 @@ body {
 	top: 0;
 	width: 100%;
 	height: 100%;
-	background: url('ui/images/error_bg.png');
+	background: url('../images/error_bg.png');
 	background-size: cover;
 }
 

ui/js/omlink.js → ui/js/index.js

@@ -1,3 +1,8 @@
+import $ from 'jquery';
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '../css/omlink.scss';
+
 /**
  * Main Javascript file
  *
@@ -100,7 +105,7 @@ function ForceFocus() {
 	}, 1000);
 }
 
-$(function () {
+document.addEventListener('DOMContentLoaded', function () {
 	SetupConfirmationDialog();
 
 	refreshNotificationArea();
@@ -119,5 +124,4 @@ $(function () {
 	setInterval(() => {
 		refreshNotificationArea();
 	}, 3000);
-});
-
+});

ui/masterpage.tpl → ui/masterpage-webpack.tpl

@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport">
   <title>{{@SITENAME}}</title>
-  <link href="{{@BASEURL}}/bundle.css?v={{@VERSION}}" rel="stylesheet" type="text/css"/>
   <link href="{{@BASEURL}}/ui/favicon_{{@CUSTOMERNAME}}.ico?v={{@VERSION}}" rel="shortcut icon" type="image/x-icon">
 
   <script type="text/javascript">
@@ -21,8 +20,6 @@
 
 <include href="footer.tpl"/>
 
-<script src="{{@BASEURL}}/bundle.js?v={{@VERSION}}"></script>
-
 <check if="{{isset(@REQ_REDIRECT}})">
   <true>
     <script>

watcher.js

@@ -1,24 +0,0 @@
-const fs = require('fs');
-const {execSync} = require('child_process');
-
-// this is for fix because the event fire twice
-let twiceFix = false;
-
-function compileAll(event, fname) {
-	if (event == 'change' && twiceFix) {
-		console.log(`${fname} as changed`);
-		twiceFix = false;
-		execSync('node build.js');
-	}
-	twiceFix = true;
-}
-
-console.log('Adding watcher for ui/css/omlink.scss');
-fs.watch('ui/css/omlink.scss', function (event, fname) {
-	compileAll(event, fname);
-});
-
-console.log('Adding watcher for ui/js/onlink.js');
-fs.watch('ui/js/omlink.js', function (event, fname) {
-	compileAll(event, fname);
-});

webpack.config.js

@@ -0,0 +1,36 @@
+const path = require("path");
+const TerserJSPlugin = require('terser-webpack-plugin');
+const HtmlPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+module.exports = {
+	plugins: [
+		new CleanWebpackPlugin(),
+		new HtmlPlugin({template: "./ui/masterpage-webpack.tpl", filename: "../masterpage.tpl"}),
+		new MiniCssExtractPlugin({filename: "styles.css"})
+	],
+	module: {
+		rules: [
+			{
+				test: /\.(css|scss)$/,
+				use: [
+					{loader: "style-loader"},
+					MiniCssExtractPlugin.loader,
+					{loader: "css-loader", options: {url: false,}},
+					"sass-loader"
+				]
+			}
+		]
+	},
+	optimization: {
+		minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+	},
+	entry: "./ui/js/index.js",
+	output: {
+		path: path.resolve(__dirname, "ui/dist/"),
+		filename: "bundle.js"
+	},
+	mode: "production"
+};