Unbundling the JavaScript module bundler - DublinJS July 2018

Unbundling the JavaScript module bundlerUnbundling the JavaScript module bundler
Luciano Mammino (Luciano Mammino ( ))@loige@loige
DublinJS 03/07/2018
loige.link/bundle-dublinjs
1

Webpack == PAIN!?Webpack == PAIN!?
twitter.com/search?q=webpack%20pain
@loige 3

It's not Webpack!It's not Webpack!
Module bundling is actually complicated!Module bundling is actually complicated!
@loige 11

Luciano... whoLuciano... who
Find me online:
- (@loige)
- (lmammino)
-
- (loige.co)
Twitter
GitHub
Linkedin
Blog
Solution Architect at
with @mariocasciaro
with @andreaman87
with @Podgeypoos79
12

1. Why we need modules
2. JavaScript module systems
3. How a module bundler works
4. Webpack in 2 minutes!
5. Advanced module bundling
AgendaAgenda
@loige 13

http://poo.loige.co
@loige 14

App featuresApp features
@loige 15

Dynamic DOM manipulation
React, Angular, Vue
are so... overrated!
@loige 16

Dynamic Favicon
favico.js@loige 17

Custom animated tooltips
tippy.js@loige 18

Confetti rainfall
dom-confetti@loige 19

Persist state through Local Storage + UUIDs
+store2 uuidjs@loige 20

7 Requests only for the JS code!
@loige 21

Current scenarioCurrent scenario
zepto@1.2.0/dist/zepto.min.js
uuidjs@4.0.3/dist/uuid.core.js
store2@2.7.0/dist/store2.min.js
tippy.js@2.2.3/dist/tippy.all.min.js
confetti@0.0.10/lib/main.js
favico.js@0.3.10/favico0.3.10.min.js
@loige 22

Ideal scenarioIdeal scenario
zepto@1.2.0/dist/zepto.min.js
uuidjs@4.0.3/dist/uuid.core.js
store2@2.7.0/dist/store2.min.js
tippy.js@2.2.3/dist/tippy.all.min.js
confetti@0.0.10/lib/main.js
favico.js@0.3.10/favico0.3.10.min.js
vendors.js
+
+
+
+
+
=
@loige 23

How to do this?How to do this?
@loige 24

./buildVendors.sh > vendors.js
buildVendors.sh
$
@loige 25

npx lumpy build$
github.com/lmammino/lumpy
@loige 26 . 1

# lumpy.txt
https://unpkg.com/zepto@1.2.0/dist/zepto.min.js
https://unpkg.com/uuidjs@4.0.3/dist/uuid.core.js
https://unpkg.com/store2@2.7.0/dist/store2.min.js
https://unpkg.com/tippy.js@2.2.3/dist/tippy.all.min.js
https://unpkg.com/confettijs@0.0.11/dist/index.min.js
https://unpkg.com/domconfetti@0.0.10/lib/main.js
https://unpkg.com/favico.js@0.3.10/favico0.3.10.min.js
Lumpy allows you to deﬁne
all the vendors in a text ﬁle
@loige 26 . 2

lumpy build$
1. Downloads the files from lumpy.txt (and caches them)
2. Concatenates the content of the files
3. Minifies the resulting source code (using )
4. Saves the resulting content in vendors.js
babel-minify
@loige 26 . 3

7 requests
2 requests
@loige 27

7 requests
2 requests
@loige
Even better if you "minify" these!
27

ConcatenationConcatenation
++
MiniﬁcationMiniﬁcation
@loige 28

This is good...This is good...
@loige 29

This is good...This is good...
... in 2008... in 2008
waswas
@loige 29

Today...Today...
We can do better!We can do better!
@loige 30

Updating dependencies should be easyUpdating dependencies should be easy
We don't want to worry about dependencies ofWe don't want to worry about dependencies of
dependenciesdependencies
We don't have to worry about the order of importsWe don't have to worry about the order of imports
Today...Today...
@loige 31

DependencyDependency
(or coupling)
a state in which one object uses a function of
another object
— Wikipedia
@loige 32

Reusable dependencies...Reusable dependencies...
Modules!Modules!
@loige 33

ModulesModules
The bricks for structuring non-trivial applications,
but also the main mechanism to enforce information
hiding by keeping private all the functions and
variables that are not explicitly marked to be
exported
— *Node.js Design Patterns (Second Edition)
* yeah, I quite like quoting my stuff...
@loige 34

AgendaAgenda
@loige 35

Meet my friendMeet my friend I.I.F.E.I.I.F.E.
(Immediately Invoked Function Expression)
loige.link/iife
@loige 36

We generally deﬁne a function this wayWe generally deﬁne a function this way
@loige 37

const sum = (a, b) => a + b
@loige 37

oror
@loige 37

sum(a, b) {
return a + b
}
oror
@loige 37

sum(a, b) {
return a + b
}
oror
then, at some point, we execute it...then, at some point, we execute it...
@loige 37

sum(a, b) {
return a + b
}
oror
then, at some point, we execute it...then, at some point, we execute it...
const four = sum(2, 2)
@loige 37

A function in JS creates an isolated scopeA function in JS creates an isolated scope
@loige 38

(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
@loige 38

(a, b) => {
const secretString = "Hello"
return a + b
}
console.log(secretString) // undefined
secretStringsecretString is not visible outside the functionis not visible outside the function
@loige 38

IIFE allows you to deﬁne an isolated scopeIIFE allows you to deﬁne an isolated scope
that executes itselfthat executes itself
(arg1, arg2) => {
// do stuff here
const iAmNotVisibleOutside = true
}
@loige 39

(arg1, arg2) => {
// do stuff here
}
A function with its own scope
@loige 39

)(someArg1, someArg2)
(arg1, arg2) => {
// do stuff here
}
(
@loige 39

)(someArg1, someArg2)
(arg1, arg2) => {
// do stuff here
}
(
This wrapper executes the function immediately and passes arguments from the
outer scope
@loige 39

IIFE is a recurring pattern inIIFE is a recurring pattern in
JavaScript modulesJavaScript modules
@loige 40

Let's implement a moduleLet's implement a module
that provides:that provides:

Information hidingInformation hiding
exported functionalitiesexported functionalities
@loige 41

const myModule = (() => {
const privateFoo = () => { /* ... */ }
const privateBar = [ /* ... */ ]
const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})()
myModule.publicFoo()
myModule.publicBar[0]
myModule.privateFoo // undefined
myModule.privateBar // undefined
privateFoo // undefined
privateBar // undefined @loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
privateBar // undefined @loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
privateBar // undefined
IIFE
Creates an isolated scope
and executes it
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
information hiding
non-exposed functionality
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
deﬁnes exported
functionalities
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
propagates the exports
to the outer scope (assigning it to myModule)
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
Can access exported
functionalities
@loige42

const exported = {
publicFoo: () => { /* ... */ },
publicBar: [ /* ... */ ]
};
return exported
})() A module
No visibility for the
non-exported ones
@loige42

We want modules to beWe want modules to be
reusablereusable across different apps andacross different apps and
organisations...organisations...
...we need...we need
AA STANDARD MODULESTANDARD MODULE format!format!@loige 43

Module system featuresModule system features
Must have
Simple syntax for import / export
Information hiding
Allows to deﬁne modules in separate ﬁles
Modules can import from other modules
(nested dependencies)
@loige 44

Module system featuresModule system features
Nice to have
Ability to import module subsets
Avoid naming collision
Asynchronous module loading
Seamless support for Browsers & Server-side
@loige 45

JavaScript module systemsJavaScript module systems
globals
CommonJS (Node.js)
AMD (Require.js / Dojo)
UMD
ES2015 Modules (ESM)
Many others (SystemJS, ...)
@loige 47

GlobalsGlobals
var $, jQuery
$ = jQuery = (() => {
return { /* ... */ }
})()
// ... use $ or jQuery in the global scope
$.find('.button').remove()
@loige 48

GlobalsGlobals
Might generate naming collisions
(e.g. $ overrides browser global variable)

Modules needs to be "fully loaded" in the right order

Cannot import parts of modules
@loige 49

// or import single functionality
const { concat } = require('./loDash')
concat([1], [2], [3])
// app.js
// import full module
const _ = require('./loDash')
_.concat([1], [2], [3])
// loDash.js
const loDash = {
/* ... */
}
module.exports = loDash
CommonJSCommonJS
@loige 50

concat([1], [2], [3])
// app.js
_.concat([1], [2], [3])
// loDash.js
const loDash = {
/* ... */
}
CommonJSCommonJS
module
@loige 50

concat([1], [2], [3])
// app.js
_.concat([1], [2], [3])
// loDash.js
const loDash = {
/* ... */
}
CommonJSCommonJS
module
app using module
@loige 50

CommonJSCommonJS
No naming collisions
(imported modules can be renamed)
Huge repository of modules through

Synchronous import only
Works natively on the server side only (Node.js)
NPM
@loige 51

AMD (AMD ( ))
Asynchronous Module DeﬁnitionAsynchronous Module Deﬁnition
Require.jsRequire.js
// jquery-1.9.0.js
define(
'jquery',
['sizzle', 'jqueryUI'],
function (sizzle, jqueryUI) {
// Returns the exported value
return function () {
// ...
}
}
)
@loige 52

AMD (AMD ( ))
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
@loige 52

AMD (AMD ( ))
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
module name
@loige 52

AMD (AMD ( ))
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
dependencies
@loige 52

AMD (AMD ( ))
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
factory function used to construct the
module,
receives the dependencies as arguments
@loige 52

AMD (AMD ( ))
// jquery-1.9.0.js
define(
'jquery',
// ...
}
}
)
module
exported value
@loige 52

AMD (AMD ( ))
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
jquery: 'jquery-1.9.0'
}
})
define(['jquery'], function ($) {
// this is executed only when jquery
// and its deps are loaded
});
@loige 53

AMD (AMD ( ))
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
}
})
}); app
@loige 53

AMD (AMD ( ))
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
}
})
}); app
Require.js conﬁg
jquery will be loaded from
://<currentDomain>/js/lib/jquery-1.9.0.js
@loige 53

AMD (AMD ( ))
// app.js
// define paths
requirejs.config({
baseUrl: 'js/lib',
paths: {
}
})
}); app
app main function
Has jquery as dependency
@loige 53

AMD (AMD ( ))
Asynchronous modules
Works on Browsers and Server side

Very verbose and convoluted syntax (my opinion™)
@loige 54

UMDUMD
Universal Module DefinitionUniversal Module Definition
A module definition that is compatible with
Global modules, CommonJS & AMD

github.com/umdjs/umd
@loige 55 . 1

(function (root, factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('dep'))
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['dep'], function (dep) {
return (root.returnExportsGlobal = factory(dep))
})
} else {
// Global Variables
root.myModule = factory(root.dep)
}
}(this, function (dep) {
// Your actual module
return {}
}))
loige.link/umd@loige 55 . 2

(function (root, factory) {
if (typeof exports === 'object') {
// CommonJS
module.exports = factory(require('dep'))
} else if (typeof define === 'function' && define.amd) {
// AMD
define(['dep'], function (dep) {
return (root.returnExportsGlobal = factory(dep))
})
} else {
// Global Variables
root.myModule = factory(root.dep)
}
}(this, function (dep) {
// Your actual module
return {}
}))
loige.link/umd
IIFE with arguments:
- Current scope (this) and the module
factory function.
- "dep" is a sample dependency of the
module.
@loige 55 . 2

Allows you to define modules that
can be used by almost any module loader

Complex, the wrapper code
is almost impossible to write manually
UMDUMD
Universal Module DefinitionUniversal Module Definition
@loige 55 . 3

ES2015 modulesES2015 modules
Cool & broad subject, it would deserve it's own talk
Wanna know more?
/ syntax referenceimport export
ECMAScript modules in browsers
ES modules: A cartoon deep-dive
ES Modules in Node Today!
@loige 56 . 1

// calculator.js
const add = (num1, num2) => num1 + num2
const sub = (num1, num2) => num1 - num2
const div = (num1, num2) => num1 / num2
const mul = (num1, num2) => num1 * num2
export { add, sub, div, mul }
// app.js
import { add } from './calculator'
console.log(add(2,2)) // 4
@loige 56 . 2

// calculator.js
// app.js
module
@loige 56 . 2

// calculator.js
// app.js
moduleexported functionalities
@loige 56 . 2

// calculator.js
// app.js
module
app
@loige 56 . 2

// calculator.js
// app.js
module
app
import speciﬁc functionality
@loige 56 . 2

// index.html
<html>
<body>

<script type="module">
import { add } from 'calculator.js'
</script>
</body>
</html>
@loige 56 . 3

// index.html
<html>
<body>

<script type="module">
import { add } from 'calculator.js'
</script>
</body>
</html>
"works" in some modern browsers
@loige 56 . 3

Syntactically very similar to CommonJS...
BUT
import & export are static
(allow static analysis of dependencies)

It is a (still work in progress) standard format

Works (almost) seamlessly in browsers & servers
@loige 56 . 4

So many options...So many options...
Current most used practice:
Use CommonJS or ES2015 & create "compiled bundles"
@loige 57

AgendaAgenda
@loige 58

Let's try to use CommonJSLet's try to use CommonJS
in the browserin the browser
@loige 59

const $ = require('zepto')
const tippy = require('tippy.js')
const UUID = require('uuidjs')
const { confetti } = require('dom-confetti/src/main')
const store = require('store2')
const Favico = require('favico.js')
!(function () {
const colors = ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a']
const todoApp = (rootEl, opt = {}) => {
const todos = opt.todos || []
let completedTasks = opt.completedTasks || 0
const onChange = opt.onChange || (() => {})
const list = rootEl.find('.todo-list')
const footer = rootEl.find('.footer')
const todoCount = footer.find('.todo-count')
const insertInput = rootEl.find('.add-todo-box input')
const insertBtn = rootEl.find('.add-todo-box button')
const render = () => {
let tips
list.html('')
The browser doesn't know how
to process require.
It doesn't support CommonJS!
@loige 60

Module BundlerModule Bundler
A tool that takes modules with dependencies and emits
static assets representing those modules

Those static assets can be processed by browsers!
@loige 61

Dependency graphDependency graph
A graph built by connecting every module with its direct
dependencies.
app
dependency A dependency B
dependency A2
shared
dependency
@loige 62

A module bundler has to:A module bundler has to:
Construct the dependency graph
(Dependency Resolution)
Assemble the modules in the graph into a
single executable asset (Packing)
@loige 63

// app.js
const calculator = require('./calculator')
const log = require('./log')
log(calculator('2 + 2 / 4'))
// log.js
module.exports = console.log
// calculator.js
const parser = require('./parser')
const resolver = require('./resolver')
module.exports = (expr) => resolver(parser(expr))
// parser.js
module.exports = (expr) => { /* ... */ }
// resolver.js
module.exports = (tokens) => { /* ... */ }
Dependency resolutionDependency resolution
64@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
64
(entrypoint)
(1)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
64
(entrypoint)
(1)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
64
(entrypoint)
(1)
(2)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser
64
(entrypoint)
(1)
(2)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser
64
(entrypoint)
(1)
(2)
(3)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser resolver
64
(entrypoint)
(1)
(2)
(3)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator
parser resolver
64
(entrypoint)
(1)
(2)
(3)
(4)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator log
parser resolver
64
(entrypoint)
(1)
(2)
(3)
(4)
@loige

// app.js
// log.js
// calculator.js
// parser.js
// resolver.js
app
calculator log
parser resolver
64
(entrypoint)
(1)
(2)
(3)
(4)
(5)
@loige

DuringDuring dependency resolutiondependency resolution,,
the bundler creates athe bundler creates a modules mapmodules map
@loige 65

{

}
@loige 65

{

}
'./app': (module, require) => { … },
@loige 65

{

}
'./calculator': (module, require) => { … },
@loige 65

{

}
'./parser': (module, require) => { … },
@loige 65

{

}
'./resolver': (module, require) => { … },
@loige 65

{

}
'./log': (module, require) => { … },
@loige 65

{

}
require path
@loige 65

{

}
module factory function
@loige 65

{

}
const parser = require('./parser');const resolver =
require('./resolver');module.exports = (expr) =>
resolver(parser(expr))@loige 65

PackingPacking
{
   :
   :
   :
}
Modules mapModules map
@loige 66

PackingPacking
.js
{
   :
   :
   :
}
Modules mapModules map
Single executableSingle executable
JS ﬁleJS ﬁle
@loige 66

Packed executable ﬁlePacked executable ﬁle
((modulesMap) => {
const require = (name) => {
const module = { exports: {} }
modulesMap[name](module, require)
return module.exports
}
require('./app')
})(
{
'./resolver': (module, require) => { … }
}
) 67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
IIFE passing the modules map as
argument
67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
Custom require function:
it will load the modules by
evaluating the code from the
modules map
67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
A reference to a module with an
empty module.exports.
This will be ﬁlled at evaluation
time
67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
Invoking the factory function for
the given module name.
(Service locator pattern)
67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The current reference module is
passed, the factory function will
modify this object by adding the
proper exported values.
67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The custom require function is
passed so, modules can
recursively require other modules
67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The resulting module.exports is
returned
67
@loige

((modulesMap) => {
}
require('./app')
})(
{
}
)
The entrypoint module is
required, triggering the actual
execution of the business logic
67
@loige

Now you know howNow you know how
Module bundlers work!Module bundlers work!

And how to convert code writtenAnd how to convert code written
usingusing CommonJSCommonJS to a single ﬁle thatto a single ﬁle that
works in the browserworks in the browser
@loige 68

A challenge for you!A challenge for you!
If you do, ... I'll have a prize for you!

TIP: you can use or to parse JavaScript files (look for
require and module.exports) and to map relative module paths to
actual files in the filesystem.

Need an inspiration? Check the awesome !
let me know
acorn babel-parser
resolve
minipack
Can you build a (simple) module bundler from scratch?Can you build a (simple) module bundler from scratch?
@loige 69

AgendaAgenda
@loige 70

A state of the art moduleA state of the art module
bundler for the webbundler for the web
@loige 71

npm install webpack webpackcli
@loige 72

webpack app.js
yep, recent versions of Webpack work without conﬁg!
@loige 73

webpack mode=development app.js
Do not compress the code and add
annotations!
@loige 74

loige.link/sample-webpacked-ﬁle
@loige75

Webpack conceptsWebpack concepts
Entry point: the starting file for dependency resolution.
Output: the destination file (bundled file).
Loaders: algorithms to parse different file types and convert them
into executable javascript (e.g. babel, typescript, but also CSS,
images or other static assets)
Plugins: do extra things (e.g. generate a wrapping HTML or
analysis tools)
@loige 76

const { resolve, join } = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
entry: './app.js',
output: {
path: resolve(join(__dirname, 'build')),
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env']
]
}
}
}
]
},
plugins: [
new CompressionPlugin()
]
}
Webpack.conﬁg.js
@loige77

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Entrypoint
Build the dependency graph starting from ./app.js
@loige77

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Output
Save the resulting bundled ﬁle in ./build/app.js
@loige77

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Loaders
All the ﬁles matching "*.js" are processed with babel
and converted to ES5 Javascript
@loige77

module.exports = {
entry: './app.js',
output: {
filename: 'app.js'
},
module: {
rules: [
{
test: /.js$/,
use: {
options: {
presets: [
]
}
}
}
]
},
plugins: [
]
}
Webpack.conﬁg.js
Plugins
Uses a plugin that generates a gzipped copy of every
emitted ﬁle.
@loige77

Everything is a moduleEverything is a module
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
</div>
);
}
}
export default App 78

Webpack can load any type of fileWebpack can load any type of file
As long as you specify a "As long as you specify a "loaderloader" that tells" that tells
how to convert the file into something thehow to convert the file into something the
browser understands.browser understands.
This is how Webpack allows you to use Babel, TypeScript,
Clojure, Elm but also to load CSSs, Images and other assets.
79

{
test: /.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', 80

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// Deﬁnes how to load .css ﬁles (uses a pipeline of loaders)
80

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// parses the ﬁle with post-css
80

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// process @import and url()
// statements
80

{
test: /.css$/,
use: [
{
options: {
importLoaders: 1,
},
},
{
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
// process @import and url()
// statements
// inject the resulting code with a <style> tag
80

...Webpack can do (a lot) more!...Webpack can do (a lot) more!
Dev ServerDev Server
Tree shakingTree shaking
Dependencies analyticsDependencies analytics
Source mapsSource maps
Async require / module splittingAsync require / module splitting
@loige 81

AgendaAgenda
@loige 82

Webpack inWebpack in create-react-appcreate-react-app
yarn global add create-react-app
create-react-app newapp
cd newapp
yarn
yarn eject
cat ./config/webpack.config.{dev,prod}.js
83

Webpack is notWebpack is not
the only possibility!the only possibility!
85

AgendaAgenda
@loige 86

Module bundlers are your friendsModule bundlers are your friends
Now you know how they work,
they are not (really) magic!
Start small and add more when needed
If you try to build your own you'll learn a
lot more!
@loige 87

THANKS!THANKS!
loige.link/bundle-dublinjs
Special thanks
, , ,
(reviewers) and
(inspirations: his and his
)
@Podgeypoos79 @andreaman87 @mariocasciaro
@eugenserbanescu
@MarijnJH amazing book
workshop on JS modules
@loige
Images by .Streamline Emoji pack
88

Unbundling the JavaScript module bundler - DublinJS July 2018

More Related Content

What's hot (20)

Similar to Unbundling the JavaScript module bundler - DublinJS July 2018 (20)

More from Luciano Mammino (20)

Recently uploaded (20)

Unbundling the JavaScript module bundler - DublinJS July 2018