-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (98 loc) · 5.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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>ita-webpack4-labs</title>
<link rel="stylesheet" type="text/css" href="style.css">
</style>
</head>
<body>
<h1>ita-webpack4-labs</h1>
<p>
Laboratori per imparare e sperimemintare l'utilizzo **webpack 4**, descritti e commentati in italiano
</p>
<h2>dall' `unboundled` al primo pacchetto</h2>
<ul>
<div id="lab-01">
<li><a href="src/lab-01-unboundled/index.html">lab-01-unboundled: cominciamo senza un pacchetto</a></li>
<li><a href="src/lab-01/index.html">lab-01: impacchettamento del javascript (<em></em>bundling js files<em>)</em></a></li>
</div>
</ul>
<h2>asset-management</h2>
<ul>
<div id="lab-02">
<li><a href="src/lab-02/index2a.html">lab-02a: utilizzo dei "loaders" per impacchettare risorse (<em>to bundle assets</em>) come stili css e immagini png, icone etc.</a>: url-loader</li>
<li><a href="src/lab-02/index2b.html">lab-02b: utilizzo dei "loaders" per impacchettare risorse (<em>to bundle assets</em>) come stili css e immagini png, icone etc.</a>: file-loader [1]</li>
<li><a href="src/lab-02/index2c.html">lab-02c: utilizzo dei "loaders" per impacchettare risorse (<em>to bundle assets</em>) come stili css e immagini png, icone etc.</a>: file-loader [2]</li>
</div>
<div id="lab-03">
<li><a href="/src/lab-03/src/fonts/webfont.html">lab-03: @rondinif/phytojs-webfont</a>: demo</li>
<li><a href="src/lab-03/index.html">lab-03: utilizzo dei "loaders" per impacchettare risorse (<em>to bundle assets</em>) come fonts.</a></li>
</div>
<div id="lab-04">
<li><a href="src/lab-04/index.html">lab-04: utilizzo dei "loaders" per impacchettare risorse (<em>to bundle assets</em>) come dati xml ( o csv) che in questo caso carichiamo e logghiamo sulla console.</a></li>
</div>
<div id="lab-05">
<li><a href="src/lab-05/index.html">lab-05: ripulisti.</a></li>
</div>
</ul>
<h2>output-management</h2>
<ul>
<div id="lab-06">
<li><a href="src/lab-06/index.html">lab-06: gestione dell'output: endpoint multipli</a></li>
</div>
<div id="lab-07">
<li><a href="dist/lab-07/index.html">lab-07: gestione dell'output: HtmlWebpackPlugin</a></li>
</div>
<div id="lab-08">
<li><a href="dist/lab-08/index.html">lab-08: gestione dell'output: HtmlWebpackPlugin + CleanWebpackPlugin</a></li>
</div>
</ul>
<h2>ambiente di sviluppo , "source maps", "development tools", "watch mode", etc..</h2>
<ul>
<div id="lab-09">
<li><a href="dist/lab-09/index.html">lab-09: contiene volutamente un errore che serve per verificare il funzionamento delle ”source maps"</a></li>
</div>
<div id="lab-10">
<li><a href="http://localhost:8080/dist/lab-10/index.html">lab-10: ”source maps" con webpack-dev-server</a><br/>richiede esecuzione del webpack-dev-server "$ npm run start-lab-10"</li>
</div>
<div id="lab-11">
<li><a href="http://localhost:3000">lab-11: ”source maps" con node express + webpack-dev-middleware </a><br/>richiede esecuzione del server.js (express) "$ npm run start-lab-11"</li>
</div>
</ul>
<h2>mix di laboratori base</h2>
<ul>
<div id="lab-83">
<li><a href="dist/lab-83/index.html">lab-83: gestione risorse come webfont (lab-03) insieme a HtmlWebpackPlugin + CleanWebpackPlugin(lab08)</a></li>
<li><a href="src/lab-83/do-not-use-this-index.html">lab-83: collegamento alla pagina html in src che non serve più manutenere grazie ai plugin in uso</a></li>
</div>
<div id="lab-83-pug">
<li><a href="dist/lab-83-pug/index.html">lab-83-pug: gestione risorse come webfont (lab-03) insieme a HtmlWebpackPlugin + CleanWebpackPlugin(lab08) + pug</a></li>
<li><a href="dist/lab-83-pug-adv-a/index.html">lab-83-pug-adv-a: gestione risorse come webfont (lab-03) insieme a HtmlWebpackPlugin + CleanWebpackPlugin(lab08) + pug</a></li>
<li><a href="http://localhost:8080/dist/lab-83-pug-adv-a/index.html">come lab-83-pug + lab-10: ”source maps" con webpack-dev-server</a><br/>richiede esecuzione del webpack-dev-server "$ npm run start-lab-83-pug-adv-a"</li>
</div>
<div id="lab-pug-01">
<li><a href="dist/lab-pug-01/index.html"><b>lab-pug-01</b>: come lab-83-pug</a></li>
<li><a href="dist/lab-01-pug-adv-a/index.html"><b></b>lab-01-pug-adv-a</b>: come lab-83-pug-adv-a</a></li>
<li><a href="http://localhost:8080/dist/lab-pug-01-adv-a/index.html"><b>lab-pug-01-adv-a</b>: come lab-83-pug-adv-a ”source maps" con webpack-dev-server</a><br/>richiede esecuzione del webpack-dev-server "$ npm run start-lab-pug-01-adv-a"</li>
</div>
<div id="lab-pug-02">
<li><a href="dist/lab-pug-02/index.html"><b>lab-pug-02</b>: come lab-pug-01 + bozza vanilla js di "Unidirectional user interface architecture"</a></li>
<li><a href="dist/lab-02-pug-adv-a/index.html"><b></b>lab-02-pug-adv-a</b>: come lab-01-pug-adv-a</a>+ bozza vanilla js di "Unidirectional user interface architecture"</li>
<li><a href="http://localhost:8080/dist/lab-pug-02-adv-a/index.html"><b>lab-pug-02-adv-a</b>: come lab-02-pug + ”source maps" con webpack-dev-server</a><br/>richiede esecuzione del webpack-dev-server "$ npm run start-lab-pug-02-adv-a"</li>
</div>
<div id="lab-pug-03">
<li><a href="dist/lab-pug-03/index.html"><b>lab-pug-03</b>: recupero e utilizzo di dati e di configurazioni di ambiente da utilizzare nella fase di build e pacchettizzazione
</a></li>
</div>
</ul>
<h2>mix di laboratori base</h2>
<ul>
<div id="lab-pug-sass-01">
<li><a href="dist/lab-pug-sass-01/index.html">lab-pug-sass-01: come lab-pug-03 ma integrazione di variabili tra stili css e javascript; in questo caso il passaggio del valore di una variabile è da scss a javascript (server-side) ed infine ad un elemento html (client-side)</a></li>
</div>
</ul>
</body>
</html>