Have you ever run into a problem where you tried to email or send some data to someone and you got a warning that the data you are trying to send over is too big? What you're trying to send over could be as simple as a 1-minute cute dog/cat video. Well, you are not the only one. Websites can run into similar problems as well. When you open a website it will request everything from the server hosting that website. That site could be made with multiple files of code ranging from CSS, JPG, HTML, and more. Unfountly, most browsers can’t handle multiple files being requested. Normally, for sending data that is too big, you will zip/compact the data into smaller ones. This can not be done with a website since that data and what files connect to each other are too big. Luckily there’s an open-source module you can use to zip/bundle your data into a small single file, WEBPACK.
Fun Facts
It was released on February 19, 2014, with the most stable version released on March 20, 2024. Webpack is a free and open-source module bundler, which as I said in the first paragraph, bundles code, making projects with multiple files much easier for the browser to receive when requested, and much faster to load. Most developers will use this blunder when they are making a website. Another reason developers like this blunder is because it is not too hard to set up and install.
Let Start Coding
For starters, we will set the Webpack up using React so make sure you have React and React-dom installed. After that, we want to install a couple of other modules installed as dev dependencies, because what we are installing will be used for the developer to build his code.
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install html-webpack-plugin --save-dev
npm install @babel/core babel-loader --save-dev
npm install @babel/preset-env @babel/preset-react --save-dev
Now let's create our file and call it webpack.config.js and start coding. First, we need to require ‘path’ a native NodeJs module that helps concatenate a file path, then we need to export an object with an entry and output path. This will tell it what file to bundle and where to send it after bundling it. Then inside the entry key, we need to give it a directory path, the path to where we want to bundle our code, and the file name itself. For output, it’s the same but the path for where to find the file will become where to put the file, and there is no need to give it a third parameter. In output, give it a filename key and it will create a file with the name given, and give it the bundle code. If no filename key is given, then that name will be given to the output path key as the third parameter. Instead of a file being created, it will create a folder with that name instead, containing our bundle code.
Const path = require ('path')
Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
}
}
Next, we need to tell Webpack to use some plugins since normally it can only use Javascript by default. It is set up similarly to how we set up the entry key. This also allows webpack to interact with the script tag in the HTML file.
Const path = require ('path')
Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
}
Now that we have our plugging we now set some rules for Webpack to follow when bundling our code. In this example, we will be using Bable and tell it to only use specific files like jsx.
Const path = require ('path)
Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
},
module: {
rules: [
{
test: /\.?jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
}
Since Bable is a transpirer, we need to tell it what to transpile by giving it an options key with a present key holding some of the things we installed at the beginning.
Const path = require ('path)
Module.export{
Entry: path.join(__dirname, "src", "index.js"),
Output:{
Filename: "bundle.js"
path.join(__dirname, "dist", "bundle"),
},
module: {
rules: [
{
test: /\.?jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader", options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
}
Finally, in your package.json file make some script commands to run webpack server and bundle our code.
"scripts": {
"dev": "webpack serve",
"build": "weback",
...
}
Also, if you are curious, bable can set rules in Webpack to be able to bundle SVG, images, and CSS files too. Now that you know what webpack is, you probably want to add it to your next web development project, seeing as how it is not too hard to set up and install, perfect for any size project from big to small. Give it a try if you're interested in trying webpack out.
//links
https://medium.com/age-of-awareness/setup-react-with-webpack-and-babel-5114a14a47e9#bb4c
https://www.digitalocean.com/community/tutorials/nodejs-how-to-use__dirname
https://www.youtube.com/watch?v=5zeXFC_-gMQ&t=1s
https://www.youtube.com/watch?v=rI37HS-Vj8A&list=PLzAGFfNx
Top comments (0)