Webpack

WEBPACK

what is Webpack?

• another module bundler to turn fancy javascript / react stuff into standard Javascript
• module bundlers are needed to make things work because it turns all the pre-Javascript react and nodejs code into runnable Javascript.

TODO: do the webpack thing

• https://medium.com/@ahsan.ayaz/beginners-guide-to-webpack-how-to-start-a-basic-application-with-webpack-2-ebed3172fa8c
• https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460

versioning errors

• Webpack config has an unknown property 'preLoaders' (or 'loaders')

advanced webpack

• code splitting source 2 source 3

minimal setup environment for reactjs

• https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
• setup here

Webpack seeks to unify Javascript module syntaxes and provide tools for a full swath of static asset management tasks. It imposes no restrictions on your choice of module syntax, and offers full support for Javascript, CSS, and even image preprocessing. link

why webpack?

• https://tutorialzine.com/2017/04/learn-webpack-in-15-minutes
• Pros:
  • Great for working with single-page apps
  • Accepts both require() and import module syntaxes
  • Allows for very advanced code splitting
  • Hot Reload for quicker development with React, Vue.js and similar frameworks
  • Мost popular build tool according to the 2016 JavaScript survey
• Cons:
  • Not suitable for beginners in web development
  • Working with CSS files, images, and other non-JS resources is confusing at first
  • Documentation could be better
  • Changes a lot, even most 2016 tutorials are already outdated

links

• cheat sheet (instagram guy) https://github.com/petehunt/webpack-howto