web pack and friends

Maciej HryniszakWebpack and friends

mvn clean install

mvn archetype:generate

mvn release:prepare

mvn release:perform

mvn tomcat:run

mvn tomcat7:run

mvn clean install

mvn archetype:generate

mvn release:prepare

mvn release:perform

mvn tomcat:run

mvn tomcat7:run

VERBOS

Emvn clean install

mvn archetype:generate

mvn release:prepare

mvn release:perform

mvn tomcat:run

mvn tomcat7:run

Build tool -

check!

???

Hello!

My name is Maciej Hryniszak

http://padcom13.blogspot.comhttp://github.com/padcom

https://pl.linkedin.com/in/padcom

JavaScript module ~ Java class

Java class -> class

JavaScript module -> value

Why should I care?

dom.jsdoT.jsdust.jsEJSHandlebars.jsHogan.jsICanHaz.jsJadeJsRenderMarkup.jsMicrotemplatingMustache.jsNumjucksPlates.jaPure.js

EcmaScript 6EcmaScript 7TypeScriptCoffeeScript

LessSass/SCSSStylusCSS-CrushMythReworkClayDtCSS

dom.jsdoT.jsdust.jsEJSHandlebars.jsHogan.jsICanHaz.jsJadeJsRenderMarkup.jsMicrotemplatingMustache.jsNumjucksPlates.jaPure.js

EcmaScript 6EcmaScript 7TypeScriptCoffeeScript

LessSass/SCSSStylusCSS-CrushMythReworkClayDtCSS

FONTS

IMAGES

Audio & video

Configuring Webpack

and Friends?

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

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

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

Webpack with frameworks

https://github.com/AngularClass/angular2-webpack-starter

generator-angular-webpack-es6

https://github.com/tulios/ember-webpack-example

https://medium.com/@tulios/using-ember-with-webpack-e03290b61dec

https://github.com/tulios/ember-webpack-example

don’t use, stick with ember-cli

webpack-react-redux-mocha-karma

react-webpackreact-webpack-redux

Key takeaways

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

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

Q & A

Thank you!