with Webpack 4.x
A frontend bundler
<!-- index.html -->
<html>
<!-- ... -->
<script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="bower_components/angular-file-upload/angular-file-upload.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/filesize.js"></script>
<script src="scripts/url.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/config.js"></script>
</body>
</html>
Still kind of Do It Yourself
painful: assets, paths, modes
+
A full frontend development setup in one declarative file
With handsome features like:
zero conf, image importations, hot replacement, dev webserver, chunks, server rendering, eslint integration, ...
Let's show!
github.com/friedrith/discover-webpack
main.js
logo.svg
index.html
~ 280 Kb
Let's show!
main.js
logo.svg
index.html
~ 116 Kb
heavy.js
~ 168 Kb
A lot of optimizations available!
Mainly relevant
for heavy web applications
Very easy to set up
with webpack
Bonus:
Webpack 4.x zero conf is very cool!