I gave a talk at ReactFoo Mumbai about the history of how we arrived at the module bundlers we have today, specifically webpack. We walked through a live coding demo where I built a working webpack configuration for a working Vue application and then talked about the future of webpack.

1. A re-introduction to webpack
Praveen Puglia

2. Praveen Puglia
Sainthia, West Bengal Senior Software Engineer
@praveenpuglia

3. Praveen Puglia
Sainthia, West Bengal Senior Software Engineer
@praveenpuglia

4. webpack

5. Agenda
• The History
• How do you even…
• The Future

6. The History

7. Good Enough! 😎
<script type="text/javascript"
src="app.js">
</script>

8. Maintenance is Important
app.js

9. Maintenance is Important
app.js
home.js
login.js
album.js
slider.js
signup.js
social.js

10. Limited Parallel Connections
Browser Maximum Connections
IE 11 13
Firefox 6
Chrome 6
Safari 6
Opera 6

11. Concatenate
(+=)

12. Concatenate
(+=)
home.js
+= login.js
+= album.js
+= slider.js
+= signup.js
+= social.js
—————————————
= app.js

13. Which order though?

14. Which order though?
1. home.js
2. login.js
3. album.js
4. slider.js
5. signup.js
6. social.js

15. Which order though?
1. home.js
2. login.js
3. album.js
4. slider.js
5. signup.js
6. social.js
3
2
1
5
6
4
1
3
5
6
4
2
1
2
4
3
6
5

16. Which order though?
1. home.js
2. login.js
3. album.js
4. slider.js
5. signup.js
6. social.js
3
2
1
5
6
4
1
3
5
6
4
2
1
2
4
3
6
5

17. If you messed it up…

18. If you messed it up…

19. If you messed it up…

20. Being Human

21. Being Human
• JSMin

22. Being Human
• JSMin
• YUI Compressor

23. Being Human
• JSMin
• YUI Compressor
• Closure Compiler

24. Being Human
• JSMin
• YUI Compressor
• Closure Compiler
• UglifyJS

25. Being Human
• JSMin
• YUI Compressor
• Closure Compiler
• UglifyJS
• Gulp, Grunt

26. No Solution

27. No Solution
• Concatenating

28. No Solution
• Concatenating
• Manual Dependency Management

29. No Solution
• Concatenating
• Manual Dependency Management
• Serving All at Once

30. No Solution
• Concatenating
• Manual Dependency Management
• Serving All at Once
• Serving Bloat

31. CommonJS
// add.js
function add (a, b) {
return a + b
}
module.exports = add
// index.js
const add = require('./add')
console.log(add(4, 5))

32. WAT Common JS You Speak of?
☹

33. Welcome Browserify

34. What About Us?
• Images
• Videos
• HTML
• Objects
• Templates
• …

35. Presenting…webpack 🎉

36. Import Everything
require('../style.css');
require(‘../logo.png');
require(‘the-solar-system’);

37. Endorsed By React
The only time you are gonna see the React logo in this talk!

38. Endorsed By React
The only time you are gonna see the React logo in this talk!

39. webpack is hard!

40. – John Webpacker
“It’s a myth!”

41. Core Concepts

42. webpack
.config.js
module.exports = {
};

43. Entry
// String
entry: './index.js'
// Object
entry: { index: './index.js' }

44. Output
// Specified bundle file name
output: {
filename: ‘bundle.js’,
}
// Use the entry file name
output: {
filename: '[name].js',
}

45. Loaders
module: {
rules: [
{
test: /.ts$/,
use: 'ts-loader'
}
]
}

46. Plugins
plugins: [
new UglifyJSPlugin(),
]

47. ✔ Just Do It

48. ✔ Just Do It

49. Serving All At Once

50. Code
Splitting
// App.vue
<template>
<button @click=“loadTags">🏷 Tag</button>
</template>
export default {
name: 'app',
methods: {
loadTags() {
import('./tags.js').then(() => {
alert(‘Tags Source is loaded!’)
});
}
}
}
</script>

51. Code
Splitting
Asset Size Chunks Chunk Names
0.bundle.f26b44a30563e52436f4.js 70 bytes 0 [emitted]
bundle.f26b44a30563e52436f4.js 243 kB 1 [emitted] main
index.html 408 bytes [emitted]

52. Code
Splitting
Asset Size Chunks Chunk Names
0.bundle.f26b44a30563e52436f4.js 70 bytes 0 [emitted]
bundle.f26b44a30563e52436f4.js 243 kB 1 [emitted] main
index.html 408 bytes [emitted]

53. Serving Bloat

54. Tree
Shaking
// util.js
export const hello = () => {
console.log('Hello!');
}
export const world = () => {
console.log('World!');
}
// index.js
import { hello } from './util';
hello();
"use strict";
// util.js
const hello = () => {
console.log('Hello!');
};
/* harmony export (immutable) */
__webpack_exports__["a"] = hello;
const world = () => {
console.log('World!');
};
/* unused harmony export world */

55. Tree
Shaking
// util.js
export const hello = () => {
console.log('Hello!');
}
export const world = () => {
console.log('World!');
}
// index.js
import { hello } from './util';
hello();
"use strict";
// util.js
const hello = () => {
console.log('Hello!');
};
/* harmony export (immutable) */
__webpack_exports__["a"] = hello;
const world = () => {
console.log('World!');
};
/* unused harmony export world */

56. Tree
Shaking
// util.js
export const hello = () => {
console.log('Hello!');
}
export const world = () => {
console.log('World!');
}
// index.js
import { hello } from './util';
hello();
"use strict";
// util.js
const hello = () => {
console.log('Hello!');
};
/* harmony export (immutable) */
__webpack_exports__["a"] = hello;
const world = () => {
console.log('World!');
};
/* unused harmony export world */

57. Tree
Shaking
// util.js
export const hello = () => {
console.log('Hello!');
}
export const world = () => {
console.log('World!');
}
// index.js
import { hello } from './util';
hello();
"use strict";
// util.js
const hello = () => {
console.log('Hello!');
};
/* harmony export (immutable) */
__webpack_exports__["a"] = hello;
const world = () => {
console.log('World!');
};
/* unused harmony export world */

58. Tree
Shaking
// util.js
export const hello = () => {
console.log('Hello!');
}
export const world = () => {
console.log('World!');
}
// index.js
import { hello } from './util';
hello();
"use strict";
// util.js
const hello = () => {
console.log('Hello!');
};
/* harmony export (immutable) */
__webpack_exports__["a"] = hello;
const world = () => {
console.log('World!');
};
/* unused harmony export world */

59. Tree
Shaking
// util.js
export const hello = () => {
console.log('Hello!');
}
export const world = () => {
console.log('World!');
}
// index.js
import { hello } from './util';
hello();
"use strict";
// util.js
const hello = () => {
console.log('Hello!');
};
/* harmony export (immutable) */
__webpack_exports__["a"] = hello;
const world = () => {
console.log('World!');
};
/* unused harmony export world */

60. Tree
Shaking
// util.js
export const hello = () => {
console.log('Hello!');
}
export const world = () => {
console.log('World!');
}
// index.js
import { hello } from './util';
hello();
"use strict";
// util.js
const hello = () => {
console.log('Hello!');
};
/* harmony export (immutable) */
__webpack_exports__["a"] = hello;
const world = () => {
console.log('World!');
};
/* unused harmony export world */

61. Tree
Shaking
// webpack.config.js
const UglifyJsPlugin
= require(‘uglifyjs-webpack-plugin’);
…
plugins: [
new UglifyJsPlugin()
]
🌎

62. Tree
Shaking
// webpack.config.js
const UglifyJsPlugin
= require(‘uglifyjs-webpack-plugin’);
…
plugins: [
new UglifyJsPlugin()
]

63. The Future

64. webpack 4 & beyond
• #0CJS, Modes, Defaults
• Superfast!
• CLI upgrades
• Better Modules & WASM
https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

65. To Recap

66. To Recap
Important
🚨

67. To Recap
Not Difficult
🤗
Important
🚨

68. To Recap
Not Difficult
🤗
Removes Bloat
🚿
Important
🚨

69. To Recap
Not Difficult
🤗
Removes Bloat
🚿
Important
🚨
Awesome
🤩

70. Thank You
@praveenpuglia