Skip to content

webpack.md

Latest commit

 

History

History
39 lines (27 loc) · 1.83 KB

webpack.md

File metadata and controls

39 lines (27 loc) · 1.83 KB

Webpack

Outcome

You'll:

  • Have a basic understanding of what webpack is and what it's used for.
  • Be able to use webpack using our seed project.

You won't:

  • Be a pro with webpack and be editing that complicated webpack.config.js file any time soon :p

Advice

Webpack is a tool which helps you 'build' code. (Take things which won't quite run in the browser e.g. .scss or ES6 Javascript and convert them to vanilla HTML, CSS and JS (transpile them))

It's the new hotness and it's quite easy to setup.

What will webpack do for us:

  • Run a server so you can access your site like this: http://localhost:8000
    • This is good because it's closer to the real deal (as opposed to file://myfile.html, i've seen webpages which worked on a server but not as a file.)
  • Transpile SCSS into CSS
  • Let you use the require syntax to require one of your .js files from another. (This solves the global var problem in javascript)
    • This works by 'bundling' many files into one giant file. (So it's also a sort of transpile)
    • You can also require libraries you got using NPM. e.g. var $ = require('jQuery'). $ will then only be defined in your current file.
  • Transpile ES6 (latest) Javascript into ES5 (current version which all browsers support) Javascript
  • Watch for your files to change, and automatically redo the above transpiles and refresh your browser automatically.

Tasks

  • Checkout the sample webpack project.
    • Read the readme for the commands you can run
    • Run a dev server and open it up and your browser
    • Modify some SCSS and check it compiles to CSS and you can see it in chrome
    • Modify some javascript and look at the output in chrome
    • Do some javascript requires and look at the output in chrome
    • Look at how javascript's ES6's features are being 'compiled' in Chrome