A short overview of the basics of Webpack and how it fits into the landscape of most most popular frameworks

1. Maciej Hryniszak
Webpack and friends

10. mvn clean install
mvn archetype:generate
mvn release:prepare
mvn release:perform
mvn tomcat:run
mvn tomcat7:run

11. mvn clean install
mvn archetype:generate
mvn release:prepare
mvn release:perform
mvn tomcat:run
mvn tomcat7:run

12. VERBOSE
mvn clean install
mvn archetype:generate
mvn release:prepare
mvn release:perform
mvn tomcat:run
mvn tomcat7:run

16. Build tool - check!

18. ???

19. Hello!
My name is Maciej Hryniszak
http://padcom13.blogspot.com
http://github.com/padcom
https://pl.linkedin.com/in/padcom

21. JavaScript module ~ Java class

22. Java class -> class

23. JavaScript module -> value

25. Why should I care?

27. dom.js
doT.js
dust.js
EJS
Handlebars.js
Hogan.js
ICanHaz.js
Jade
JsRender
Markup.js
Microtemplating
Mustache.js
Numjucks
Plates.ja
Pure.js
EcmaScript 6
EcmaScript 7
TypeScript
CoffeeScript
Less
Sass/SCSS
Stylus
CSS-Crush
Myth
Rework
Clay
DtCSS

28. dom.js
doT.js
dust.js
EJS
Handlebars.js
Hogan.js
ICanHaz.js
Jade
JsRender
Markup.js
Microtemplating
Mustache.js
Numjucks
Plates.ja
Pure.js
EcmaScript 6
EcmaScript 7
TypeScript
CoffeeScript
Less
Sass/SCSS
Stylus
CSS-Crush
Myth
Rework
Clay
DtCSS
FONTS
IMAGES
Audio & video

29. Configuring Webpack

30. and Friends?

31. mvn clean
mvn install
mvn test
mvn javadoc:javadoc
mvn archetype:generate
mvn release:prepare / perform
mvn tomcat:run
rm -rf target
npm install
karma [args]
yuidoc -c <config>
yo <generator> [args]
git tag && npm publish
webpack-dev-server --hot --inline

32. mvn clean
mvn install
mvn test
mvn javadoc:javadoc
mvn archetype:generate
mvn release:prepare / perform
mvn tomcat:run
rm -rf target
npm install
karma [args]
yuidoc -c <config>
yo <generator> [args]
git tag && npm publish
webpack-dev-server --hot --inline

33. npm run clean
npm run install
npm test
npm run doc
yo <generator> [args]
npm run deploy
npm start
mvn clean
mvn install
mvn test
mvn javadoc:javadoc
mvn archetype:generate
mvn release:prepare / perform
mvn tomcat:run

34. Webpack with frameworks

35. https://github.com/AngularClass/
angular2-webpack-starter
generator-angular-webpack-es6

36. https://github.com/tulios/
ember-webpack-example
https://medium.com/@tulios/using-embe
r-with-webpack-e03290b61dec

37. https://github.com/tulios/
ember-webpack-example
don’t use, stick with ember-cli

38. webpack-react-redux-mocha-karma
react-webpack
react-webpack-redux

39. Key takeaways
➔ Webpack is AWESOME!
➔ Yo is your friend
➔ npm run all your commands
➔ Globally installed packages are evil

40. References
https://blog.madewithlove.be/post/webpack-your-bags/
https://webpack.github.io
https://github.com/padcom/generator-webpack-react-redux-mocha-karma
https://github.com/AngularClass/angular2-webpack-starter
https://medium.com/tulios/using-ember-with-webpack-e03290b61dec
https://github.com/tulios/ember-webpack-loaders

41. Q & A

42. Thank you!