Anthony

Learn Webpack 4 in 5 minutes or less

Learn Webpack 4 in 5 minutes or less

Over the past few months, I’ve really become a big fan of Webpack, but there haven’t been a time that I cherished the webpack configuration. process. Gosh! why can’t it just do the configuration on it’s own! Well, seems like my wish got granted. Yes! Now we can use webpack with zero configuration.

In this article we’ll see how we can install and start using webpack with no config.

NOTE: this article wasn’t meant to be a beginner’s tutorial to webpack, it’s just a quick start to webpack 4.

Let’s get started!

Open your text editor, in your root dir of your project create a src folder. Inside that folder create two javaScript files

  • index.js and client.js.

Run the init command to create a package.json file, you can add the -y flag to skip the questions if you want.

  npm init -y

Install Webpack

  npm install -D webpack

Once it’s installed, go to your package.json file and add a build script, as seen in the example below:

  "build": "webpack"

And that’s it, at this moment you can run the build command. - When you run the build command, you’ll get a prompt message telling you to install the Webpack CLI, agree to install webpack-cli by typing yes

  npm run build

If you did the above correctly, then you’re set to go. You can start working with Webpack on the the fly. A dist folder will be created, inside that dist folder you’ll find the bundle -a main.js file. That’s the file you want to reference inside the script tag in your index.html

    <script src="dist/main.js"></script>

In your terminal, I’m sure there is a warning message that The ‘mode’ option has not been set, don’t worry we’ll get back to that, as a matter of fact you can choose not to do anything, but we’ll address it later.

Working with Webpack

In your client.js file let’s assume we have a function like this:

    const sayHello = name => {
        return `Hello ${name}`
    }

Now let’s export this function so we can use it in our index.js

  export default sayHello;

Ok, our function have been exported, but we still need to import it into the index.js file

In the index.js file import that function we exported

  import sayHello from "./client";

Now let’s see if we can use it in our index.js, try logging it to the console:

  console.log(sayHello('Sarah Conel'));

Open your console and see for yourself. It worked!

Good to know

As far as webpack setup goes I believe we are partially done with the tutorial, but wait there is more.

1. -Getting rid of that warning message

2. -Exporting and importing multiple functions -

Setting a Mode

That warning message you got is basically indicating that there are modes in Webpack 4, you can set it to development or production mode

Let’s set it to development mode

That build script we added in the package.json file, add –mode development to the build script, like this.

 "build": "webpack --mode development"

Run the build command again and see how the message disappear.

Exporting and Importing Multiple Functions

We create a function sayHello and we exported it as default. Now if you create another function and try to export it as default you’ll get a compile error. You can’t export more than one function as default, so how do we export functions instead?

Let’s assume we have 2 functions inside our client.js file, we export them like this:

 export function heyThere(){
    console.log('HELLO THERE');
}

export function greeting(){
    console.log('GOOD MORNING!');
}

Notice how the export was place before the functions

Importing them to our index.js file would be something like this:

  import { heyThere } from './client'
  import { greeting } from './client'

We all know that a function will not work unless it have been called.

Now call the functions inside that index.js file

  heyThere()
  greeting()

Run the build command and see the magic.

I hope you find this article helpful.

comments powered by Disqus