Setting up Webpack for your Project
In this blog, I will explain to you how to set up Webpack for your project. If you want to learn the basics of Webpack and why do we use it, you can watch the video below and then come back.
You may already know that Webpack bundles all of your modules and dependencies into one file which you can then include in your project for many reasons explained in the above video.
So once we install webpack, we need to tell webpack which are the modules/files it needs to bundle and the path where it needs to output a single bundled file.
So let's begin :)
Prerequisites
What do you need to get started with Webpack?
Well, all you need is node js
to be installed on your system. And node js comes preinstalled with npm
Installation
In order to install the webpack locally in your project, you need to go into your project and run npm init --yes
command. The npm init
creates a package.json
file that stores a lot of information like the names and version no. of the installed npm packages, dependencies, scripts etc. The--yes
flag allows you to skip all the questions it asks while executing the npm init
command
cd projectname
npm init --yes // creates package.json
npm i -D webpack @babel/core babel-loader webpack-cli path
Babel allows us to write source code in our preferred programming language or markup language and have it translated by Babel into JavaScript, a language understood by modern web browsers. @babel/core
is babel compiler core.babel-loader
helps transpile our js code into ES5 as not all browsers understand ES6.webpack-cli
is a command line tool for webpack.path
module is used for handling and transforming file paths.
You can watch the tutorial video below to see it in action.
Create a src
directory and file called index.js
inside of it. Also, create a dist
directory, this is where we will ask webpack to create the bundled file. And let's say our main file is index.php
. Once we do this, our directory structure would look like this:
-projectname
-dist
-main.js // This is the bundled file that webpack will create
-src
-index.js
package.json
index.php
./src/index.js
is the file where you write all the codes and we will tell webpack to bundle all codes into one file ./dist/main.js
// src/index.js
const test = () => {
console.log( 'test' );
};test();
The Webpack Config file
You can create a config file called webpack.config.js
that stores the configuration for your webpack like the path for your entry point and output file, loaders etc. If you don’t create this file then webpack uses its default configuration file.
So let's create a file called webpack.config.js
in the root of your project and add the following configurations.
// webpack.config.js
const path = require( 'path' );module.exports = {
context: __dirname,
entry: './src/index.js',
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
}
]
}
};
Now let me explain to you what each of these properties means.
We can define the path module first, which is used for handling and transforming file paths.
The module.exports
makes the object on the right side of the equals sign, available to the outside world ( in this case to webpack ).
Using entry
property value we tell webpack which file(s)/modules it needs to bundle and output
defines where it needs to output the bundled file.
Entry: So entry is the point from where you will tell webpack to start building. In this case, it is ./src/index.js
Context: Context allows entry
to take the root of the path that you have defined in context property. In this case its __dirname
Output: We define the path and the filename where the webpack will produce the output. In this case ./dist/main.js
Rules: Then we add rules in the module
object which ensures that whenever it finds a *.js
file, it uses babel-loader to convert it to ES5. We do so as not all browsers support ES6.
Add scripts in package.json
Now let's add these custom scripts into package.json
file.
Now run npm run dev
. This will compile the index.js
file from src
directory and create main.js
inside dist
directory.
// package.json
"scripts": {
"dev": "webpack --watch --mode=development",
"prod": "webpack --mode=production"
},
webpack --watch --mode=development
: Please note that when you run npm run dev
it runs webpack — watch — mode=development
. Here --watch
command watches your changes so that you don’t have to run the webpack
command multiple times.webpack --watch --mode=production
: Similarly when you run npm run prod
it runs webpack — watch — mode=development
We run npm run dev
for development and npm run prod
for production.
Please note that if you pass a -p
flag , it generates a minified version of the build file for production. However when you run ‘npm run prod’, webpack automatically uglifies the bundle file so you don’t need to pass a -p
flag.
You can now create index.php in the root of your project and add the below script before body ends to include the single bundled file produced by webpack
<script src="dist/main.js"></script>
That’s all you need to do to bundle a single file.
Create multiple entry points for individual pages
If you want to include multiple bundled file for individual files, then you can define multiple entry points and then on those individual pages, you can include these. So let's say your file structure is:
-projectname
-dist
-index.js
-about.js
-src
-index.js
-about.js package.json
index.php
about.php
So In index.php
you can include <script src=”dist/index.js”></script>
and in about.php
you can include <script src=”dist/about.js”></script>
const path = require( 'path' );module.exports = {
context: __dirname,
entry: {
index: './src/index.js',
about: './src/about.js'
},
output: {
path: path.resolve( __dirname, 'dist' ),
filename: '[name].js',
}, module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
}
]
},
plugins: []
};
This will create ./dist/index.js
and ./dist/about.js
bundled files out of ./src/index.js
and ./src/about.js
respectively.
The placeholder [name] allows you to create dynamically named bundled files.
So for entry index
, it becomes filename: index.js
and for the entry about
it becomes home.js