Managing assets can be a cumbersome task. Luckily we now have bundlers to streamline this task. In this article, we would be taking a look at Webpack, the most popular bundler available.
Webpack can seem extremely daunting at first glance, but this article will ensure that you have enough knowledge to configure Webpack on your own.
What Exactly is Webpack?
Let's see how Google defines it: "webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. webpack takes modules with dependencies and generates static assets representing those modules."
You might have come across a few new terms like "loaders" in the definition. Let's take a look at a few terms before proceeding:
-
loaders: Loaders are third-party extensions that help webpack deal with various file extensions. For example, there are loaders for CSS, for images, etc.
The goal of a loader is to transform files (other than JavaScript) in modules. Once the file becomes a module, webpack can use it as a dependency in your project.
plugins: Plugins are third-party extensions that can alter how webpack works. For example there are plugins for extracting HTML, CSS, for working with micro-frontends.
First Webpack App
Let's start small. Initialize a new node project by creating a new folder and using the command npm init -y. Install webpack related dependencies using npm i -D webpack webpack-cli
NOTE: Webpack dependencies should always be Dev Dependencies.
Initialize the following files:
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack Demo</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
// src/index.html
console.log("Hello Webpack!")
Finally, add the following script in your package.json:
"scripts": {
"build": "webpack --config webpack.config.js"
}
Now you can use npm run build to generate dist/bundle.js and run public/index.html to utilize the generated bundle.
Adding Loaders
You might be wondering "So much work for THIS?" Fret not my friend, here's where Webpack's magic starts.
Add file-loader to our project using npm i -D file-loader and update webpack.config.js
module.exports = {
// ...
module: {
// defining the rules for additional modules, other than .js files
// you can very well use rules for .js files too, eg: using babel-loader
rules: [
{
// files the rule applies to (using RegEx is a good practice)
test: /\.(png|jpe?g|svg)$/,
// loaders & configuration
use: [
{
loader: 'file-loader',
// if you skip the options, the default options will be used
options: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
},
],
},
};
Now you can import image files into your projects.
// src/index.js
// NOTE: you can use ES Modules import/export statements
import natureImg from './assets/nature.jpg'
const img = document.createElement('img')
img.src = natureImg
document.body.appendChild(img)
Run the build script to generate the files. Open public/index.html
Adding Plugins
Let's now optimize how we handle HTML so that webpack automatically adds the script files to the page. Add the html-webpack-plugin using the command npm i -D html-webpack-plugin.
// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
Remove the script tag from public/index.html. Webpack will inject the scripts. It will also generate an additional index.html file in the dist folder, which you can use.
Using Dev Server
Repeatedly reloading the page quite often turns out a big pain. To solve this very problem, we have webpack-dev-server.
Install the dependency using npm i -D webpack-dev-server.
// webpack.config.js
// ...
module.exports = {
// ...
devServer: {
port: 3000, // default: 8000
},
};
Finally you need to add another script:
"start": "webpack serve --config webpack.config.js"
You can now use npm start to start up the webpack server
Wrapping Up
That's all you need to know about webpack... it's just a module bundler, which allows you to configure it as per your requirement using loaders and plugins. You can look at some other available plugins in the following articles:
Hope you have overcome your fear of using webpack and this article helps you in your development journey!
I am currently working on a project using a completely custom configured Webpack, feel free to check it out:
ruppysuppy
/
Crypto-Crowdfund
🤑💰 Crowdfunding Platform backed by Ethereum Blockchain to bring your creative projects to life
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer? Contact me on Upwork
Want to see what I am working on? Check out my GitHub
I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram
Follow my blogs for Weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.Would you like to collaborate on our site?
As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.
Connect to me on
Top comments (3)
Don't you need a script for webpack-dev-server?
Yeah, thanks a lot for pointing it out :)
Thanks for this article!
But i really dont got which problem webpack came to resolve (im a beginner learning node and web development), but i will trust and accept