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!
- 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.
Once it’s installed, go to your package.json file and add a build script, as seen in the example below:
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
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
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:
Now let’s export this function so we can use it in our index.js
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
Now let’s see if we can use it in our index.js, try logging it to the console:
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.
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:
Notice how the export was place before the functions
Importing them to our index.js file would be something like this:
We all know that a function will not work unless it have been called.
Now call the functions inside that index.js file
Run the build command and see the magic.
I hope you find this article helpful.