Semantic UI CSS library integration (partial)

Curently the whole compiled library is being imported, which is 614KB; Will remove unused styles later via webpack loader. Also, imported jQuery used by Semantic; jQuery is not used yet and we might remove it later, if we don't need it.

Semantic UI CSS library integration (partial)
e70ae746 · Anton Bershanskiy · c2023613 · e70ae746 · e70ae746 · e70ae746
Commit e70ae746 authored 6 years ago by Anton Bershanskiy
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
    "cookie": "^0.3.1"
  },
  "devDependencies": {
+    "jquery": "^3.3.1",
    "ncp": "^2.0.0",
+    "semantic-ui-css": "^2.4.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },

--- a/source/common/pages/popup/popup.html
+++ b/source/common/pages/popup/popup.html
@@ -3,7 +3,10 @@
  <head>
    <title></title>
    <meta charset="utf-8"/>
+    <link href="/includes/semantic-ui-css/semantic.min.css" rel="stylesheet">
    <link href="popup.css" rel="stylesheet"/>
+    <script src="/includes/jquery/jquery.min.js" defer></script>
+    <script src="/includes/semantic-ui-css/semantic.min.js" defer></script>
    <script src="popup.js" defer></script>
  </head>
  <body>

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,8 +7,9 @@ const fs = require("fs")

 const base = "./source/common/"
 const build = "./build/"
+const node_modules = "./node_modules/"

-const dirs = ["", "pages/", "img-t/", "includes/"]
+const dirs = ["", "pages/", "img-t/", "includes/", "includes/semantic-ui-css", "includes/jquery"]

 const copy = [
 	"pages/",
@@ -23,6 +24,12 @@ const files = [
 	"web_accessible_resources/inject.js"
 ]

+const modules = {
+	"semantic-ui-css/semantic.min.js": "semantic-ui-css/semantic.min.js",
+	"semantic-ui-css/semantic.min.css": "semantic-ui-css/semantic.min.css",
+	"jquery/dist/jquery.min.js": "jquery/jquery.min.js"
+}
+
 // Create all dirs if they do not exists yet
 for (const dir of dirs)
 	if (!fs.existsSync(build+dir))
@@ -36,6 +43,16 @@ for (const src of copy)
 		console.log("Copied " + src)
 	})

+//Copy all the modules
+for (const module in modules) {
+	ncp(node_modules + module, build + "includes/" + modules[module], function (err) {
+		if (err)
+			return console.error(err)
+
+		console.log("Copied " + module)
+	})
+}
+
 // Add all files that do require processing to webpack work order
 var entries = {}
 for (const file of files){
@@ -46,8 +63,8 @@ for (const file of files){
 // Ask webpack to process these files
 module.exports = {
 	entry: entries,
-  output: {
-    path: path.resolve(__dirname, build),
-    filename: "[name]"
-  }
+	output: {
+		path: path.resolve(__dirname, build),
+		filename: "[name]"
+	}
 }