подключил bootstrap, создал базовую структуру файлов

dist/bundle.js

@@ -1 +1 @@
-(()=>{var e={852:()=>{console.log("module.js")}},r={};function o(t){if(r[t])return r[t].exports;var n=r[t]={exports:{}};return e[t](n,n.exports,o),n.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{"use strict";o(852),console.log("index.js")})()})();
+(()=>{"use strict";var e,n,t,r={756:(e,n,t)=>{t.d(n,{Z:()=>i});var r=t(645),o=t.n(r)()((function(e){return e[1]}));o.push([e.id,"#app {\n  position: relative;\n}\n\n.content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 200px;\n}\n\n.sidebar {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 200px;\n  z-index: 100;\n  padding: 10px;\n  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);\n  overflow-y: auto;\n}\n",""]);const i=o},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t=e(n);return n[2]?"@media ".concat(n[2]," {").concat(t,"}"):t})).join("")},n.i=function(e,t,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&o[s[0]]||(t&&(s[2]?s[2]="".concat(t," and ").concat(s[2]):s[2]=t),n.push(s))}},n}},379:(e,n,t)=>{var r,o=function(){var e={};return function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[n]=t}return e[n]}}(),i=[];function a(e){for(var n=-1,t=0;t<i.length;t++)if(i[t].identifier===e){n=t;break}return n}function c(e,n){for(var t={},r=[],o=0;o<e.length;o++){var c=e[o],s=n.base?c[0]+n.base:c[0],u=t[s]||0,l="".concat(s," ").concat(u);t[s]=u+1;var d=a(l),f={css:c[1],media:c[2],sourceMap:c[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:l,updater:h(f,n),references:1}),r.push(l)}return r}function s(e){var n=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var i=t.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(e){n.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(n);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(n)}return n}var u,l=(u=[],function(e,n){return u[e]=n,u.filter(Boolean).join("\n")});function d(e,n,t,r){var o=t?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=l(n,o);else{var i=document.createTextNode(o),a=e.childNodes;a[n]&&e.removeChild(a[n]),a.length?e.insertBefore(i,a[n]):e.appendChild(i)}}function f(e,n,t){var r=t.css,o=t.media,i=t.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var p=null,v=0;function h(e,n){var t,r,o;if(n.singleton){var i=v++;t=p||(p=s(n)),r=d.bind(null,t,i,!1),o=d.bind(null,t,i,!0)}else t=s(n),r=f.bind(null,t,n),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return r(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;r(e=n)}else o()}}e.exports=function(e,n){(n=n||{}).singleton||"boolean"==typeof n.singleton||(n.singleton=(void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r));var t=c(e=e||[],n);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<t.length;r++){var o=a(t[r]);i[o].references--}for(var s=c(e,n),u=0;u<t.length;u++){var l=a(t[u]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}t=s}}}}},o={};function i(e){if(o[e])return o[e].exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return i.d(n,{a:n}),n},i.d=(e,n)=>{for(var t in n)i.o(n,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},i.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),e=i(379),n=i.n(e),t=i(756),n()(t.Z,{insert:"head",singleton:!1}),t.Z.locals})();

dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>JavaScript Constructor</title></head><body><h1>Webpack</h1><script src="bundle.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/><title>JavaScript Constructor</title></head><body><div id="app" class="container-fluid"><div id="panel" class="bg-light sidebar"><p>Sidebar text</p></div><div id="site" class="content"><div class="row"><div class="col-sm"><h1>Title</h1></div></div><div class="row"><div class="col-sm"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt consectetur reprehenderit ex blanditiis assumenda quaerat ea atque fugit eaque asperiores eligendi accusantium ratione exercitationem delectus eveniet unde rerum, possimus voluptate!</p></div></div><div class="row"><div class="col-sm"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt consectetur reprehenderit ex blanditiis assumenda quaerat ea atque fugit eaque asperiores eligendi accusantium ratione exercitationem delectus eveniet unde rerum, possimus voluptate!</p></div><div class="col-sm"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt consectetur reprehenderit ex blanditiis assumenda quaerat ea atque fugit eaque asperiores eligendi accusantium ratione exercitationem delectus eveniet unde rerum, possimus voluptate!</p></div><div class="col-sm"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt consectetur reprehenderit ex blanditiis assumenda quaerat ea atque fugit eaque asperiores eligendi accusantium ratione exercitationem delectus eveniet unde rerum, possimus voluptate!</p></div></div></div></div><script src="bundle.js"></script></body></html>

package.json

@@ -16,9 +16,17 @@
   "author": "Victor Batischev <vitek.batishev97@gmail.com>",
   "license": "ISC",
   "devDependencies": {
+    "css-loader": "^5.0.0",
     "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
     "webpack": "^5.3.2",
     "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "bootstrap": "^4.5.3",
+    "extract-loader": "^5.1.0",
+    "handlebars": "^4.7.6",
+    "handlebars-loader": "^1.7.1"
   }
 }

src/index.html

@@ -3,9 +3,67 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
+      crossorigin="anonymous"
+    />
     <title>JavaScript Constructor</title>
   </head>
   <body>
-    <h1>Webpack</h1>
+    <div id="app" class="container-fluid">
+      <div id="panel" class="bg-light sidebar">
+        <p>Sidebar text</p>
+      </div>
+      <div id="site" class="content">
+        <div class="row">
+          <div class="col-sm">
+            <h1>Title</h1>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm">
+            <p>
+              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt
+              consectetur reprehenderit ex blanditiis assumenda quaerat ea atque
+              fugit eaque asperiores eligendi accusantium ratione exercitationem
+              delectus eveniet unde rerum, possimus voluptate!
+            </p>
+          </div>
+        </div>
+            
+          <div class="row">
+            <div class="col-sm">
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                Incidunt consectetur reprehenderit ex blanditiis assumenda
+                quaerat ea atque fugit eaque asperiores eligendi accusantium
+                ratione exercitationem delectus eveniet unde rerum, possimus
+                voluptate!
+              </p>
+            </div>
+            <div class="col-sm">
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                Incidunt consectetur reprehenderit ex blanditiis assumenda
+                quaerat ea atque fugit eaque asperiores eligendi accusantium
+                ratione exercitationem delectus eveniet unde rerum, possimus
+                voluptate!
+              </p>
+            </div>
+            <div class="col-sm">
+              <p>
+                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+                Incidunt consectetur reprehenderit ex blanditiis assumenda
+                quaerat ea atque fugit eaque asperiores eligendi accusantium
+                ratione exercitationem delectus eveniet unde rerum, possimus
+                voluptate!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
 </html>

src/index.js

@@ -1,5 +1 @@
-import './module'
+import './styles/main.css'
-
-console.log('index.js')
-
-document.querySelector('h1').style.color = 'red'

src/module.js

@@ -1 +0,0 @@
-console.log('module.js')

src/styles/main.css

@@ -0,0 +1,22 @@
+#app {
+  position: relative;
+}
+
+.content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 200px;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 200px;
+  z-index: 100;
+  padding: 10px;
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+}

webpack.config.js

@@ -14,5 +14,18 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [
+          'style-loader',
+          'css-loader'
+          // 'handlebars-loader', // handlebars loader expects raw resource string
+          // 'extract-loader'
         ]
+      }
+    ]
+  }
 }