Webpack Tutorial: Understanding How it Works

Sean Landsman
Jan 23, 2017 · 11 min read
Webpack Tutorial | ag-Grid

Introduction to Webpack Tutorial

Product of 5 and 3 = 15
index.js:17 Sum of 5 and 3 = 8

How can Webpack help us?

How ?

Dependencies — Modules To the Rescue!

Nightmare

Death by a Thousand Cuts — Reducing Traffic

Making Dependencies Available, And Linking Them

Webpack — Initial Configuration

var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist/),
filename: 'bundle.js
}
}

Looking at bundle.js

Loaders — Making Webpack Smarter

Let’s Make it Smarter
/* 2 */
function(module, exports) {
var sum = function sum(a, b) {
return a + b;
};
module.exports = sum;
}

Making Webpack Look Good — CSS & Styling

Product of 5 and 3 = 15 Sum of 5 and 3 = 8
span {
border: 5px solid brown;
display: block;
}
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader')
}
plugins: [
new ExtractTextPlugin('style.css')
]
span {
border: 5px solid brown;
display:block;
}
<html>
<head>
<link rel="stylesheet" href="dist/style.css"/>
<script src="./dist/bundle.js""></script>
</head>
</html>

A Picture Is Worth A Thousand Words

Thousand Words
38ba485a2e2306d9ad96d479e36d2e7b.png
bundle.js
style.css
module.exports = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAMAAAACDyzWAAAC6FBMVEUAuv8AgL...."
img.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAMAAAACDyzWAAAC6FBMVEUAuv8AgL...'
Webpack

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Sean Landsman

Written by

Lead Developer — Frameworks. Responsible for integrating all of ag-Grid’s supported frameworks (Angular, Vue, React etc)

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world