CSS is Awesome Happy-CSS

Dealing with the daily frontend trouble with Martin Muzatko

Setting up Webpack

1. Lesson of Frontend Tooling series

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

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

Javascript

Other assets

Localhost/Development/Deploy

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.

npm i -D webpack webpack-dev-server

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

npm i -D postcss autoprefixer

#Lesson Work in Progress