IT-Academy_materials/webpack-config-demo
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lesson-02 base setup

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2024-10-04 11:44:01 +03:00
commit 7eb2fb7326
11 changed files with 1555 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules/

1
dist/bundle.js vendored Normal file
View File

@ -0,0 +1 @@
(()=>{"use strict";const e=(e,t,...c)=>{const n=document.createElement(e);for(const e in t){const c=t[e];if("style"===e)for(const e in c)n.style[e]=c[e];else n[e]=c}return n.append(...c),n};document.getElementById("app").append(e("div",{style:{padding:"30px",backgroundColor:"#ccc"}},e("h1",{style:{color:"green"}},"Привет мир"),e("img",{src:"/dist-off/images/1150e57a6c2fd37e2d0c.jpg"})))})();

BIN
dist/images/1150e57a6c2fd37e2d0c.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

12
index.html Normal file
View File

@ -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">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>

1460
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
package.json Normal file
View File

@ -0,0 +1,17 @@
{
"name": "webpack-test",
"version": "1.0.0",
"main": "webpack.config.js",
"scripts": {
"start": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4"
}
}

BIN
src/assets/cat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

19
src/bro-view.js Normal file
View File

@ -0,0 +1,19 @@
export const createElement = (type, props, ...children) => {
const element = document.createElement(type);
for (const key in props) {
const value = props[key];
if (key === 'style') {
for (const styleKey in value) {
element.style[styleKey] = value[styleKey];
}
} else {
element[key] = value;
}
}
element.append(...children);
return element
}

21
src/index.js Normal file
View File

@ -0,0 +1,21 @@
import { createElement as ce } from './bro-view';
import cat from './assets/cat.jpg';
import text from './text.txt'
const app = document.getElementById('app');
app.append(
ce('div', { style: { padding: '30px', backgroundColor: '#ccc' } },
ce('h1', {
style: {
color: 'green'
}
},
text
),
ce('img', {
src: cat,
})
)
);

1
src/text.txt Normal file
View File

@ -0,0 +1 @@
Привет мир

23
webpack.config.js Normal file
View File

@ -0,0 +1,23 @@
const path = require('node:path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/',
assetModuleFilename: 'images/[hash][ext][query]'
},
module: {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.txt$/i,
type: 'asset/source',
}
],
},
};