Implementing SASS with Webpack – Part 1

My CSV converter project that I’ve been working on is a test-bed for learning some key development workflows such as using Pull Requests, implementing JavaScript modules and one of the most useful of those – using Webpack to bundle project files.

When I first started the project it consisted of the following files:

• index.html
• style.css
• app.js

That was it! It was nice and simple but didn’t really do much so this was perfect. The question is, what if I was working on a far more complicated app that would benefit from splitting the files into modules, the styles into multiple files for each module and so on? I could just import every module and style file into my project – this is okay but isn’t really good in the real world aka “production”.

You will eventually want to take all those files and optimise them into a much more compact codebase with fewer files. Why? So that your 50 individual files don’t all use 50 HTTP requests when loading the page from the server. The idea of bundling is to take every one of those files that you work on while developing and with a simple set of tools and a command to then bundle all of that for you into fewer files and therefore fewer HTTP requests.

This just touches the tip of the iceberg since the bundling tools will also allow you to compress, minify and make various other changes such as implementing SASS or SCSS to your code and then making it production ready all in a single command.

Maybe I’ll come back and write more about webpack another time but for now, I’m learning how to implement SASS, so in the next part of this series we will start discussing how that works.