web developer's thoughts W.D.T.

Frontend pipeline with webpack 4

Build a complete frontend pipeline with webpack 4, learn how to bundle your javascript in the easiest way with hot reload.

Prologue

Already heard of webpack, but not sure on how to get started ? That’s the right place for you then: in this guide we will configure a basic pipeline for bundling our js files, compile sass in css and bundle them as well.

Project structure

Let’s create a new project in a folder called, for instance,¬†project-pipeline and add a bunch of files and folder in it:

Now we initialize npm with npm init, set the parameter of choice, and install some modules we need: npm i --save-dev webpack webpack-cli webpack-dev-server, which are respectively the core webpack package, a CLI utility and a development server plugin.

Inside the webpack.dev.js file we instruct webpack to serve our dist/index.html file in this way:


module.exports = {
    mode: 'development',
    devServer: {
        contentBase: './dist'
    }
}

We are ready for trying out the development server, let’s add a new command to our package.json file "dev": "webpack-dev-server --port 8080 --hot --config webpack.dev.js --env.NODE_ENV=development" and run it with npm run dev.

If opening a browser tab on localhost:8080 presents the index.html file located in the dist/ folder, then you are all set and ready to go on with the configuration.

Bundling javascripts

Create a folder javascripts/ and a javascripts/index.js file inside src/ folder, this is going to be the entry point for the javascript files, we can then edit this file with a basic function in order to prove all it’s working as it should:

function helloWorld () {
    console.log('hello world');
}
export default helloWorld;

Then we need to import this file inside src/index.js:


import javascripts from './javascripts';

javascripts();

The next step is to tell webpack that it should serve those assets bundled in a single file and re-bundle them after changes (remember the --hot flag), so in 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'
    }
}

We just need one more thing to do, link the bundled file in the index.html page, so just add a script tag with

src="/main-bundle.js"

before the body closing tag.

Conclusion

Stop and restart the webpack process in your terminal (we need to restart it because we changed the main config file), this time if we look in the dev tool console we will see the “hello world” log message, but there’s more, if we change the text to something else like “new hello world” and save, the browser will be automatically refreshed to reflect that change.

Checkout the second part of this guide in which we will cover stylesheets and preprocessors.

Highlighted posts see all

Deploy and manage Nodejs applications with PM2

Read
see all posts