web developer's thoughts W.D.T.

Frontend pipeline with webpack 4 – Part Two

Frontend pipeline with webpack 4 – part two, learn how to bundle your stylesheets.

Prologue

In the previous guide we learned how to set up a simple pipeline to bundle our javascripts assets and hot reload the webpage when a change to the source files is made, in this second part we’ll cover the stylesheets management.

Bundling stylesheets

Let’s assume that your are comfortable writing sass/scss and of course you’d like to keep doing that, so let’s go ahead and create a stylesheets/ folder and a stylesheets/index.scss file which will contain the entry point for all the stylesheets.

For a start we add just a test class to change the color of the font:

.test {
    color: red;
}

Then we need to install some other modules, npm i --save-dev node-sass css-loader sass-loader style-loader, after that we can add some configuration to the webpack.dev.js:


const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main-bundle.js'
    },
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        }]
    }
};

Here we are telling webpack to be careful with .scss files and apply to them the loaders we just installed, go ahead and stop/start the process, refresh the browser tab and you will see your style applied correctly.

Production build

As you may have noticed the css rule are injected in a script tag in the head of the html document, there are different opinions regarding if this is a bad practice or not, in any case we are going to configure webpack to spit out just one single css file so you can choose whatever output you prefer.

Let’s assume that you only want to do that for a production build and stick with the injected code while developing, for that reason we are going to create another config file webpack.prod.js with the same content plus a couple of changes:


const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main-bundle.js'
    },
    mode: 'production',
    devtool: 'source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new MiniCssExtractPlugin({ // plugin configuration
          filename: 'styles.css',
          chunkFilename: 'styles.css',
        })
      ],
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
            {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        }]
    }
};

Note that we are requiring a new module, MiniCssExtractPlugin, that we can install with npm i --save-dev mini-css-extract-plugin.

What it does is simple: takes every .scss file and bundles it in one unique file named styles.css, as we specified in the plugin configuration.

 

Let’s try if out, add a new command on the script section of the package.json file "build": "webpack --config webpack.prod.js" and run it with npm run build.

If you open the dist/ folder, you’ll see two new files styles.css and styles.css.map which contain the bundles stylesheets, you just need to link the first one in the html page and your are done.

Checkout the official github page of mini-css-extract-plugin if you are more interested on more options like minification.

Conclusion

Now you know how to setup a basic pipeline to start building something as soon as possibile, without having to spend tons of time on configuring stuff, webpack is a great tool so make sure to take a look at its official documentation for more information about what it can do.

Highlighted posts see all

Deploy and manage Nodejs applications with PM2

Read
see all posts