Compiling Sass with Webpack

I’m sure you know Grunt. It was great back there in 2013 but not much these days. The new coolest bro in town is Webpack. It bundles your app into other bundling patterns so you can use all the libraries available in NPM right into your front-end code, load different modules and do many other things. It is extremely flexible.

What is Webpack

Let’s start with some explanation about Webpack. In short Webpack is a module bundler. It takes assets (like javascript, HTML, images, fonts, CSS, …) and turns them into bundles which can be provided to the client. A few of Webpack’s awesome features:

  • Lazy loading: Load bundles only when you need them.
  • Hot Module Reloading: Instant update components without the need to refresh your application.
  • Hashing: Used for cache busting. File names will be converted to hashed filenames automatically.
  • Source maps: For easy debugging minified versions of your application.

Setting up Webpack

Make sure you have node.js installed. Probably you already have this since most of modern development tools use NPM. When node.js is installed you can run the following command:

1
$ npm install webpack -g

This will make the webpack command globally available.

Install the webpack-dev-server. This enables you to use the webpack-dev-server for any project you want.

1
$ npm install webpack-dev-server -g

Create a new project

Now Webpack is installed we can start setting up a new project. Create a project directory and init npm. This will ask some questions about your project. These settings can be changed in your package.json afterwards.

1
$ npm init

Creating a bundle

Now it’s time to set up your app. In the root of your project create an index.html file. This will be the entry point for your browser.

1
2
3
4
5
6
<html>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>

The next thing to do is to create a src/app.js file. For now we just set the content of the #app element.

1
2
console.log('I am running! Woohoo!')
document.getElementById('app').innerHTML = 'My app is working!'

Cool! The app’s entry point is set up. Let’s do some Webpack magic. Run the following command:

1
$ webpack ./src/app.js bundle.js

This above command will grab the app.js and compile it to bundle.js which is loaded in the index.html.

Congratulations! Your first Webpack bundle is a fact. Easy does it!

Webpack config file

Create a file named webpack.config.js in the root of your project. This file will contain all your configuration, loaders and information related to your build.

1
2
3
4
5
6
module.exports = {
entry: "./src/app.js",
output: {
filename: "bundle.js"
}
}

Now, when you want to compile your app just run:

1
$ webpack

This saves you some time typing the whole command over and over again. But there is more! Webpack comes with a feature called watch. This is a setting you can set in the config file as well. When set to true webpack will watch for changes in your project files and will recompile your assets directly.

1
2
3
4
5
6
7
module.exports = {
entry: "./src/app.js",
output: {
filename: "bundle.js"
},
watch: true
}

Now the only thing you need to do is run the webpack command once and it will watch your whole app. Stopping the command can be done by pressing ctrl+c.

Awesome! Your very first basic Webpack development environment is set up! A short summary of what we’ve done:

  • Installed webpack and webpack-dev-server by npm.
  • Initialized a new npm project. npm init.
  • Created an index.html which loads bundle.js
  • Created a webpack.config.js which compiles app.js to bundle.js and watches for changes.

Webpack dev server

Now we have set up our Webpack settings correctly it is time to take a look at the webpack-dev-server we’ve installed earlier. Running this server is easy.

1
$ webpack-dev-server

That’s it! Webpack is now watching your files and serves your app through http://localhost:8080. Last thing we want to do is automatically refresh the page when a file changes.

This can also be done in webpack.config.js. Just set inline: true for the devServer. The complete webpack.config.js now looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
// Your projects javascript file.
entry: "./src/app.js",
// Output. This is loaded in your index.html.
output: {
filename: "bundle.js"
},
// Automatically compile when files change.
watch: true,
// Automatically reload the page when compilation is done.
devServer: {
inline: true
}
}

Here is a screen capture of the above setup in action:

Changing app.js will automatically compile a new build.js and refresh the page in your browser.

Handling Sass files

There are hundreds of loaders available. For now we just stick with the Sass loader. This will take your sass and scss files and compile them into a single css file. First lets install them:

1
$ npm install sass-loader node-sass --save-dev

Next you want to let webpack know about the sass-loader. Again we will add some settings to webpack.config.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
entry: "./src/app.js",
output: {
filename: "bundle.js"
},
watch: true,
devServer: {
inline: true
},
// Add sass-loader
module: {
loaders: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}
}

The Sass loader will look for all scss files required in your javascript files. Create an app.scss file in the ‘src’ directory.

1
2
3
4
5
$background: #c0c0c0;
body {
background-color: $background;
}

Then require it in app.js.

1
2
// app.js
require('app.scss')

You might wonder where your actual css file is. The Sass loader doesn’t actually write a file to your filesystem. Styles are stored in app.js and will import them into your page as inline stylesheets.

Pro tip: When you want to upload your project to a production environment be sure to compile your build.js file first!

1
$ webpack

Source code

That’s it! A basic setup for compiling Sass files with Webpack. The source code can be found on github: https://github.com/timrijkse/compiling-sass-with-webpack

There is much more possible and this setup can be expanded in many ways, these will be discussed in other posts. Don’t hesitate to ask questions if you have any. Drop a comment below or follow me on twitter.

Now back to battle! Style some pages! :)

Share Comments