Setting up Webpack

1. Lesson of Front-end Automation

In this first lesson you get to know about the possibilities and to set up webpack.

Martin Muzatko Written by Martin Muzatko
on

Automating your build process is one of the least things that you would personally dive into. Since you arleady know how to develop websites and you do fine, how could you do better? Also, these tools all look so complicated to set up. You are afraid of wasting your time.

Yes, learning about automating manual labor is boring but exciting once you have control over anything you did manually previously. No more fiddling around with prefixes, etc.

What you can do with build tools

CSS

  • Preprocessing (Less, Sass, Stylus, etc)
  • IE fallbacks
  • Minify
  • Concatenate - usually preprocessors already do that for you
  • Purify - sort out selectors that are not needed
  • Vendor Prefixes

Javascript

  • Preprocess (Coffeescript, Typescript, etc)
  • Fallbacks (Use ES6 in source and ES5 online)
  • Minify
  • Concatenate all files into one
  • Use require() statements instead of manually loading dependencies via <script src="">

Other assets

  • Creating sprites
  • Inlineloading (base64) for performance of small images

Localhost/Development/Deploy

  • Automatically reload the website everytime you change your code
  • Synchronize UI scrolls, interactions with every device on the same adress
  • Create a distributable package once you are done

These are only a few examples. There are so many plugins to automate about every framework specific task or turn into various formats. Like loading riotjs tags. What is even better about these tools is, that you can opt in or out however you want to. If you just want to autoreload your website or just use preprocessors is up to you.

So, how can we get started quickly?

Lets start with a very common recipe: We have a website for a client using a css preprocessor with vendor prefixes and ES6 to ES5 transpiling. For a typical frontend job, this is already worth

If you don't know how to use NPM, please have a look on this introduction. For a new project, you need npm init to run first.

Install your devDependencies

With -D (short form for --save-dev) you add the module to your package.json file. So anytime later, if you want to upload your source to github or dropbox or anything else, you only have to do npm i to install all modules listet in your package.json. This can save you a lot of upstream.

BASH
npm i -D webpack webpack-dev-server

npm i -D less-loader less style-loader css-loader

npm i -D postcss autoprefixer
See all Lessons