-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (123 loc) · 6.84 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webpack starter basic</title>
<!-- Twitter Card data -->
<meta name="twitter:card" value="Webpack basic starter project">
<meta name="Description" content="A simple webpack starter project for your basic web development needs."/>
<!-- Open Graph data -->
<meta property="og:title" content="Webpack basic starter project" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://lifenautjoe.github.io/webpack-starter-basic/" />
<meta property="og:image" content="https://i.snag.gy/i3eMBc.jpg" />
<meta property="og:description" content="A simple webpack starter project for your basic web development needs." />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
</head>
<body>
<!-- DEMO Project page content STARTS -->
<div class="video-background">
<div class="video-foreground">
<iframe
src="https://www.youtube.com/embed/iIEIjo4dvSs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=iIEIjo4dvSs"
frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="splash">
<div class="splash__content">
<div class="splash-title">
<a href="https://github.com/lifenautjoe/webpack-starter-basic" target="_blank"><img class="splash-title__img"
src="<%= require('./src/assets/logo-on-dark-bg.png') %>"
alt="webpack logo"></a>
</div>
<div class="splash-overview">
<h1 class="splash-overview__heading">I'm a a simple webpack starter project for your basic web development needs.
</h1>
<div class="splash-overview__star">
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/lifenautjoe/webpack-starter-basic" data-show-count="true"
aria-label="Star lifenautjoe/webpack3-starter on GitHub">Star</a>
</div>
<div class="splash-overview__conclusion">
<strong> No <a href="https://pragprog.com/the-pragmatic-programmer/extracts/wizards">wizard code</a>,
understandable, scalable.</strong>
</div>
<div class="splash-overview__details">
A <strong>minimal</strong> yet <strong>rich</strong> set of features to get you going.
<div class="splash-overview-plugins">
<button id="plugins-trigger" class="splash-overview-plugins__trigger">
Show features
</button>
<ul id="plugins" class="splash-overview-plugins__list">
<li class="splash-overview-plugins__item">
<a target="_blank" href="https://github.com/babel/babel-loader">Use the latest JavaScript</a>
</li>
<li class="splash-overview-plugins__item">
<a target="_blank" href="https://github.com/webpack-contrib/sass-loader">Write styles in Sass</a>
</li>
<li class="splash-overview-plugins__item">
<a target="_blank" href="https://github.com/webpack-contrib/url-loader">Load and bundle your assets</a>
</li>
<li class="splash-overview-plugins__item">
<a target="_blank"
href="https://github.com/webpack/webpack-dev-server">Start a development server and preview your work</a>
</li>
<li class="splash-overview-plugins__item">
<a target="_blank" href="https://github.com/postcss/autoprefixer">Automatic css vendor prefixes</a>
</li>
<li class="splash-overview-plugins__item">
<a target="_blank" href="https://github.com/webpack-contrib/uglifyjs-webpack-plugin">Optimizes scripts for production</a>
</li>
<li class="splash-overview-plugins__item">
<a target="_blank" href="https://github.com/NMFR/optimize-css-assets-webpack-plugin">Optimizes styles for production</a>
</li>
<li class="splash-overview-plugins__item">
<a target="_blank" href="https://github.com/jantimon/favicons-webpack-plugin">Generates favicons</a>
</li>
</ul>
</div>
</div>
<div class="splash-overview-start">
<div class="splash-overview-start__command">
git clone https://github.com/lifenautjoe/webpack-starter-basic PROJECT-NAME
</div>
<div class="splash-overview-start__command">
cd PROJECT-NAME
</div>
<div class="splash-overview-start__command">
npm install <span class="splash-overview-start__comment"># Install dependencies </span>
</div>
<div class="splash-overview-start__command">
npm run kickstart <span class="splash-overview-start__comment"># Configure your project</span>
</div>
<div class="splash-overview-start__command">
npm run start <span class="splash-overview-start__comment"># Start the development server</span>
</div>
<div class="splash-overview-start__command">
npm run build <span class="splash-overview-start__comment"># Build for production</span>
</div>
</div>
<div class="splash-overview-issues">
<div>Have an issue or are in need of guidance?</div>
<strong>Open an issue <a
href="https://github.com/lifenautjoe/webpack3-starter/issues">here</a>. </strong>
</div>
<div class="splash-overview-footer">
A project by <strong><a target="_blank" href="https://www.lifenautjoe.com">@lifenautjoe</a></strong>.
</div>
</div>
</div>
</div>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-101423651-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-101423651-2');
</script>
<!-- DEMO Project page content ENDS -->
</body>
</html>