webpack config & upd file structure

config/server.js

@@ -6,6 +6,7 @@ const MongoClient = require('mongodb').MongoClient;
 const db_config = require('./database');
 const express = require('express');
 const server = express();
+const cors = require('cors');
 const path = require('path');
 const passport = require('passport');
 const flash = require('express-flash');
@@ -17,6 +18,7 @@ MongoClient.connect(db_config.url, {useNewUrlParser: true, useUnifiedTopology: t
     const db = client.db(db_config.name);
 
     // Config
+    server.use(cors())
     server.use(express.static(path.join(__dirname, '../dist/public')));
     server.use(express.urlencoded({ extended: false }));
     server.use(flash());

dist/public/js/admin.js

@@ -3560,7 +3560,7 @@ eval("/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source cod
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-eval("console.log('Control Panel');\n\n//# sourceURL=webpack:///./src/admin/index.js?");
+eval("console.log('Control-Panel v1.0.0 local');\n\n//# sourceURL=webpack:///./src/admin/index.js?");
 
 /***/ }),
 

dist/public/js/config/admin.materialize.config.js

@@ -27,6 +27,7 @@ document.addEventListener('DOMContentLoaded', function () {
     M.Collapsible.init(document.querySelectorAll('.collapsible'));
     M.Modal.init(document.querySelectorAll('.modal'));
 
+    // Окраска li по нажатию
     const currentPage = document.querySelector('#currentPage').dataset.current;
     const pages = Array.from(document.querySelectorAll('.collapsible li'));
     pages.forEach(function (page) {

dist/public/js/main.js

@@ -81,7 +81,7 @@
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -4002,7 +4002,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/main/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/main/components/information.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/main/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/main/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/main/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/main/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/main/components/filter.component.js\");\n/* harmony import */ var _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./modals/cart.modal.js */ \"./src/main/modals/cart.modal.js\");\n/* harmony import */ var _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./modals/pay.modal.js */ \"./src/main/modals/pay.modal.js\");\n/* harmony import */ var _components_notification_component_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/notification.component.js */ \"./src/main/components/notification.component.js\");\n\n\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar notification = new _components_notification_component_js__WEBPACK_IMPORTED_MODULE_9__[\"NotificationComponent\"]('notification');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__[\"ItemsComponent\"]('items', {\n  loader: loader\n}, {\n  notification: notification\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__[\"FilterComponent\"]('filter', {\n  items: items\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__[\"CategoryComponent\"]('category', {\n  items: items\n}, {\n  filter: filter\n});\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__[\"BreadcrumbComponent\"]('breadcrumb');\nvar cart = new _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__[\"CartModal\"]('cart', 'cartOpen', 'cartClose', {\n  items: items\n});\nvar pay = new _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__[\"PayModal\"]('pay', 'pay-js', 'payClose');\n\n//# sourceURL=webpack:///./src/main/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/main/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/main/components/information.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/main/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/main/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/main/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/main/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/main/components/filter.component.js\");\n/* harmony import */ var _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./modals/cart.modal.js */ \"./src/main/modals/cart.modal.js\");\n/* harmony import */ var _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./modals/pay.modal.js */ \"./src/main/modals/pay.modal.js\");\n/* harmony import */ var _components_notification_component_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/notification.component.js */ \"./src/main/components/notification.component.js\");\n\n\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar notification = new _components_notification_component_js__WEBPACK_IMPORTED_MODULE_9__[\"NotificationComponent\"]('notification');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__[\"ItemsComponent\"]('items', {\n  loader: loader\n}, {\n  notification: notification\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__[\"FilterComponent\"]('filter', {\n  items: items\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__[\"CategoryComponent\"]('category', {\n  items: items\n}, {\n  filter: filter\n});\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__[\"BreadcrumbComponent\"]('breadcrumb');\nvar cart = new _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__[\"CartModal\"]('cart', 'cartOpen', 'cartClose', {\n  items: items\n});\nvar pay = new _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__[\"PayModal\"]('pay', 'pay-js', 'payClose');\nconsole.log('Main Page local');\n\n//# sourceURL=webpack:///./src/main/index.js?");
 
 /***/ }),
 
@@ -4066,7 +4066,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 
 /***/ }),
 
-/***/ 0:
+/***/ 1:
 /*!*************************************************!*\
   !*** multi @babel/polyfill ./src/main/index.js ***!
   \*************************************************/

dist/views/admin/assets/scripts.pug

@@ -1,5 +1,6 @@
 script(async defer src="https://buttons.github.io/buttons.js")                   
 // Maretialize JS
 script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')                
-script(src='../js/admin/admin.js')
+//script(src='../js/admin.js')
-script(src='../js/admin/materialize.config.js')
+script(src="http://localhost:8080/admin.js")
+script(src='../js/config/admin.materialize.config.js')

dist/views/assets/scripts.pug

@@ -1,5 +1,6 @@
 // Maretialize JS
 script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js')
 // Script JS
-script(src='../js/main/main.js')
+//script(src='../js/main.js')
-script(src='../js/main/materialize.config.js')
+script(src='http://localhost:8080/main.js')
+script(src='../js/config/main.materialize.config.js')

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Webpack output javascript</title>
+</head>
+<body>
+    <h1>Webpack output javascript</h1>
+</body>
+</html>

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --mode development",
     "dev-server": "node ./config/server.js",
-    "dev-ready": "concurrently \"webpack --mode development\" \"node ./config/server.js\""
+    "wp-server": "webpack-dev-server --mode development"
   },
   "repository": {
     "type": "git",
@@ -22,6 +22,7 @@
     "@babel/polyfill": "^7.7.0",
     "axios": "^0.19.0",
     "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
     "express": "^4.17.1",
     "express-flash": "0.0.2",
     "express-session": "^1.17.0",
@@ -37,9 +38,9 @@
     "@babel/core": "^7.7.2",
     "@babel/preset-env": "^7.7.1",
     "babel-loader": "^8.0.6",
-    "concurrently": "^5.0.0",
     "dotenv": "^8.2.0",
     "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10"
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
   }
 }

src/admin/index.js

@@ -1 +1 @@
-console.log('Control Panel');
+console.log('Control-Panel v1.0.0');

src/main/index.js

@@ -20,3 +20,4 @@ const category = new CategoryComponent('category', {items}, {filter});
 const breadcumb = new BreadcrumbComponent('breadcrumb');
 const cart = new CartModal('cart', 'cartOpen', 'cartClose', {items});
 const pay = new PayModal('pay', 'pay-js', 'payClose');
+console.log('Main Page');

webpack.config.js

@@ -1,32 +1,26 @@
-var config = {
+const path = require('path');
-  // TODO: Add common Configuration
+
+module.exports = {
+  entry: {
+    admin: ['@babel/polyfill', './src/admin/index.js'],
+    main: ['@babel/polyfill', './src/main/index.js']
+  },
+  output: {
+    filename: '[name].js',
+    path: path.join(__dirname, '/dist/public/js/')
+  },
+  resolve: {
+    extensions: ['.js']
+  },
   module: {
     rules: [
       { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
     ]
   },
-};
+  devServer: {
-
+    contentBase: './dist/public/js',
-var mainApp = Object.assign({}, config, {
+    proxy: {
-  entry: ['@babel/polyfill', './src/main/index.js'],
+      "/": 'http://localhost:3000'
-  output: {
-    path: `${__dirname}/dist/public/js/main`,
-    filename: 'main.js',
     },
-  resolve: {
+  }
-    extensions: ['.js']
+}
-  },
-});
-
-var adminApp = Object.assign({}, config,{
-  entry: ['@babel/polyfill', './src/admin/index.js'],
-  output: {
-    path: `${__dirname}/dist/public/js/admin`,
-    filename: 'admin.js',
-  },
-  resolve: {
-    extensions: ['.js']
-  },
-});
-
-module.exports = [mainApp, adminApp];