This article will give a simple explanation of what is webpack and a guide through a basic setup.
webpack is a javascript bundler, this module bundler allows you to write modern javascript code that is not yet supported by browsers and transpile it to javascript that can be run on browsers. Webpack is overkill for small projects, but as soon you start writing a lot of javascript in a html webpage, webpack shows its benefits by giving you the oportunity to write that code across multiple files with the modern features of javascript so you can organize a project in a better way.
Start by initliazing a npm project with npm init -y, then install the webpack libraries npm install --save-dev webpack webpack-cli
Lets make a very simple example using ApexCharts where we mount two graphs
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack example</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script>
function createGraph1() {
var options = {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
}
function createGraph2() {
var options = {
series: [{
name: 'Inflation',
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
borderRadius: 10,
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
}
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly Inflation in Argentina, 2002',
floating: true,
offsetY: 330,
align: 'center',
style: {
color: '#444'
}
}
};
var chart = new ApexCharts(document.querySelector("#chart2"), options);
chart.render();
}
createGraph1()
createGraph2()
</script>
</body>
</html>
You can see that just for 2 graphs the html document has already a lot of javascript code. Now imagine we 10 graphs and put all the code into the html document, this would be messy and hard to mantain and change code.
So lets separate the code for each graph to seperate files and use webpack to bundle this.
Create the webpack.config.js file containing the webpack configs:
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname),
filename: 'bundle.js'
},
mode: 'development'
}
Also create a javascript file entry point index.js where webpack will start looking for when building the bundle. In the config file we defined the output file as bundle.js so in the html header include this javascript file like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack example</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="bundle.js"></script>
</head>
...
Lets then create two javascript files graph1.js and graph2.js, one for each graph and put the graphs javascript code into them. Notice that we can now give the same function names for the graphs since we are going to import these files into index.js.
graph1.js:
export default function createGraph() {
var options = {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
}
graph2.js
export default function createGraph() {
var options = {
series: [{
name: 'Inflation',
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
borderRadius: 10,
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
}
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly Inflation in Argentina, 2002',
floating: true,
offsetY: 330,
align: 'center',
style: {
color: '#444'
}
}
};
var chart = new ApexCharts(document.querySelector("#chart2"), options);
chart.render();
}
In index.js import the functions and run them:
import chart1 from './graph1';
import chart2 from './graph2';
chart1()
chart2()
Meanwhile delete this code from index.html since its not needed anymore:
<script>
function createGraph1() {
var options = {
series: [{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
};
var chart = new ApexCharts(document.querySelector("#chart1"), options);
chart.render();
}
function createGraph2() {
var options = {
series: [{
name: 'Inflation',
data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
}],
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
borderRadius: 10,
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
}
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return val + "%";
}
}
},
title: {
text: 'Monthly Inflation in Argentina, 2002',
floating: true,
offsetY: 330,
align: 'center',
style: {
color: '#444'
}
}
};
var chart = new ApexCharts(document.querySelector("#chart2"), options);
chart.render();
}
createGraph1()
createGraph2()
</script>
Now in index.js import and run the functions:
index.js
import chart1 from './graph1';
import chart2 from './graph2';
chart1()
chart2()
To run webpack add a npm script to package.json:
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack",
"webpack-watch": "webpack --watch"
}
...
Now run npm run webpack to transpile the code from index.js into bundle.js. As index.html is importing the script bundle.js the charts should appear on the page.
You can also run npm run webpack-watch to transpile on file change.