-
Notifications
You must be signed in to change notification settings - Fork 0
/
almond-webpack.html
98 lines (94 loc) · 6.28 KB
/
almond-webpack.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Tiny Loaders - AlmondJS</title>
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper"></div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>AlmondJS + Webpack</h1>
<p>AlmondJS is a small part of RequireJS, which has no provision to download dependencies on demand. Hence it only supports bundled module</p>
<p>This page uses the files bundled via Webpack. Webpack is easy and works quite well with node_modules (auto-resolution).</p>
<div class="module-container"></div>
<h4>Webpack Config: </h4>
<pre><code class="language-javascript">
// the __dirname issue might be resolved by giving proper base URL
module.exports = {
entry: './public/app/main-almond.js',
output: {
// weird issue, without __dirname doesn't work
path: __dirname + "/dist/webpack",
filename: 'build.js',
},
resolve: {
alias: {
// weird issue, without __dirname doesn't work
"Block": __dirname + "/public/app/amd/Block.js",
// Notice, no resolution for jquery required, cause
// by default it searches an unspecified module in "/node_modules/mod-name/index.js"
}
},
module: {
// rules are only necessary if you want to skip the
// the "loader-name!" part in require().
rules: [
{
// you can always use "css!file/path.css" inside require() and skip this
test: /\.css$/,
use: [
'style-loader', // have to be npm install style-loader
'css-loader' // have to be npm install css-loader
]
},
{
// this is required because bootstrap.js internally uses fonts
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
'file-loader' // have to be npm install file-loader
]
}
// notice we did not give any rule for "html-loader"
// cause we are explicity calling it using "!" syntax when required
],
},
// the following is required because we didn't want to disturb
// the curl.js loader name "text". Otherwise not needed
resolveLoader: {
alias: {
// provides an alias name for the loader
'text': 'html-loader', // have to be npm install html-loader
},
},
};
</code></pre>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</body>
<!-- Putting the script tag at end is better than relying on jquery domready -->
<!-- Because it defeats the purpose of sequentially running the code -->
<!-- Placing at ensures that dom elements are there. Any code can directly use them -->
<script src="dist/webpack/build.js"></script>
<!-- Prism -->
<!-- These files were added later. To do: Bundle them as well. -->
<script src="node_modules/prismjs/prism.js"></script>
<script src="node_modules/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js"></script>
<link href="node_modules/prismjs/themes/prism-coy.css" rel="stylesheet">
</html>