подключил bootstrap, создал базовую структуру файлов
This commit is contained in:
parent
0b86431a12
commit
aa9e4d1af8
2
dist/bundle.js
vendored
2
dist/bundle.js
vendored
@ -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})();
|
||||||
2
dist/index.html
vendored
2
dist/index.html
vendored
@ -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>
|
||||||
@ -16,9 +16,17 @@
|
|||||||
"author": "Victor Batischev <vitek.batishev97@gmail.com>",
|
"author": "Victor Batischev <vitek.batishev97@gmail.com>",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"css-loader": "^5.0.0",
|
||||||
"html-webpack-plugin": "^4.5.0",
|
"html-webpack-plugin": "^4.5.0",
|
||||||
|
"style-loader": "^2.0.0",
|
||||||
"webpack": "^5.3.2",
|
"webpack": "^5.3.2",
|
||||||
"webpack-cli": "^4.1.0",
|
"webpack-cli": "^4.1.0",
|
||||||
"webpack-dev-server": "^3.11.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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,9 +3,67 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
<title>JavaScript Constructor</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,5 +1 @@
|
|||||||
import './module'
|
import './styles/main.css'
|
||||||
|
|
||||||
console.log('index.js')
|
|
||||||
|
|
||||||
document.querySelector('h1').style.color = 'red'
|
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
console.log('module.js')
|
|
||||||
22
src/styles/main.css
Normal file
22
src/styles/main.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
@ -14,5 +14,18 @@ module.exports = {
|
|||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: './src/index.html'
|
template: './src/index.html'
|
||||||
})
|
})
|
||||||
|
],
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.css$/i,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
'css-loader'
|
||||||
|
// 'handlebars-loader', // handlebars loader expects raw resource string
|
||||||
|
// 'extract-loader'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user