Podczas tworzenia frontendu aplikacji internetowych często odkrywamy, że nasza baza kodu JavaScript dość szybko się rozrasta i lawinowo przybywa nam zależności. Oczywistym rozwiązaniem wydaje się wtedy dzielenie kodu na mniejsze moduły, ale jak to robić mądrze?​ ​Tu z pomocą przychodzi nam webpack. Podczas tej prezentacji dowiemy się​,​ w jaki sposób działa t​o narzędzie, jak konfiguruje się w nim kompilację assetów oraz jakie dodatkowe możliwości ono w sobie kryje.

1. Czym jest webpack
i dlaczego chcesz go używać?
Marcin Gajda
The Software House

2. W telegraficznym skrócie
webpack przetwarza moduły i ich zależności i
tworzy statyczne assety dla naszej aplikacji

3. Instalacja i uruchamianie
npm init
sudo npm install webpack -g
webpack ./entry_point.js bundle.js
# lub...
webpack --config webpack.config.js

4. Instalacja i uruchamianie
npm init
sudo npm install webpack -g
webpack ./entry_point.js bundle.js
# lub...
webpack --config webpack.config.js

5. Krok pierwszy
Wczytanie punktów wejściowych aplikacji
cat.js

6. Plik konfiguracyjny webpack.config.js
module.exports = {
context: __dirname+'/assets',
entry: {
cat: './cat.js'
},
output: {
path: 'compiled',
filename: '[name]-bundle.js',
publicPath: 'compiled/'
},
module: {},
plugins: {},
resolve: {}
};

7. Plik konfiguracyjny
module.exports = {
context: __dirname+'/assets',
entry: {
cat: './cat.js'
},
output: {
path: 'compiled',
filename: '[name]-bundle.js',
publicPath: 'compiled/'
},
module: {},
plugins: {},
resolve: {}
};
webpack.config.js
assets/cat.js → compiled/cat-bundle.js

8. Krok drugi
Kompilacja skryptów, grafik, styli itd.
cat.js
head.js body.js

9. Krok drugi
Kompilacja skryptów, grafik, styli itd.
cat.js
head.js body.js

10. Importowanie statyczne
catsHead = require('./cat/head.js');
catsBody = require('./cat/body.js');
console.log(catsHead());
console.log(catsBody());
head = function(){ return 'cats head' };
module.exports = head;
assets/cat/head.js
assets/cat.js
body = function(){ return 'cats body' };
module.exports = body;
assets/cat/body.js
cat.js
head.js body.js

11. Test importowania statycznego
/uszanowanko/webpack> webpack --display-modules

12. Test importowania statycznego
/uszanowanko/webpack> webpack --display-modules
Hash: f7f0a8c9c6d85acfaf68
Version: webpack 1.12.14
Time: 57ms
Asset Size Chunks Chunk Names
cat-bundle.js 2.05 kB 0 [emitted] cat
[0] ./cat.js 122 bytes {0} [built]
[1] ./cat/head.js 66 bytes {0} [built]
[2] ./cat/body.js 66 bytes {0} [built]
/uszanowanko/webpack>

13. Importowanie dynamiczne
require(['./cat/head', './cat/body'],
function(catsHead, catsBody){
console.log(catsHead());
console.log(catsBody());
}
);
head = function(){ return 'cats head' };
module.exports = head;
assets/cat/head.js
assets/cat.js
body = function(){ return 'cats body' };
module.exports = body;
assets/cat/body.js
cat.js
head.js body.js

14. Test importowania dynamicznego
/uszanowanko/webpack> webpack --display-modules

15. Test importowania dynamicznego
/uszanowanko/webpack> webpack --display-modules
Hash: f7f0a8c9c6d85acfaf68
Version: webpack 1.12.14
Time: 57ms
Asset Size Chunks Chunk Names
cat-bundle.js 4.02 kB 0 [emitted] cat
1.1-bundle.js 434 kB 1 [emitted]
[0] ./cat.js 151 bytes {0} [built]
[1] ./cat/head.js 66 bytes {1} [built]
[2] ./cat/body.js 66 bytes {1} [built]
/uszanowanko/webpack>

16. Wiele “entry pointów”
module.exports = {
//...
entry: {
cat: './cat.js',
dog: './dog.js'
},
//...
};
webpack.config.js
assets/cat.js → compiled/cat-bundle.js
assets/dog.js → compiled/dog-bundle.js

17. Wiele “entry pointów”
module.exports = {
//...
entry: {
cat: './cat.js',
dog: './dog.js'
},
//...
};
webpack.config.js
assets/cat.js → compiled/cat-bundle.js
assets/dog.js → compiled/dog-bundle.js
dog.js
head.coffee body.coffee
cat.js
head.js body.js

18. Wiele “entry pointów”
module.exports = {
//...
entry: {
cat: './cat.js',
dog: './dog.js'
},
//...
};
webpack.config.js
assets/cat.js → compiled/cat-bundle.js
assets/dog.js → compiled/dog-bundle.js
dog.js
head.coffee body.coffee
cat.js
head.js body.js

19. Loadery
module.exports = {
//...
resolve: {
extensions: ['', '.coffee', '.js']
},
module: {
loaders: [
{ test: /.coffee$/, loader: 'coffee-loader' }
]
}
};
webpack.config.js
Loadery to małe moduły, które przetwarzają wskazane im pliki i
zwracają je w formie, która może zostać zapisana lub ulec dalszemu
przetwarzaniu przez następne loadery.
npm install coffee-script coffee-loader --save

20. Loadery
module.exports = {
//...
resolve: {
extensions: ['', '.coffee', '.js']
},
module: {
loaders: [
{ test: /.coffee$/, loader: 'coffee-loader' }
]
}
};
webpack.config.js
Loadery to małe moduły, które przetwarzają wskazane im pliki i
zwracają je w formie, która może zostać zapisana lub ulec dalszemu
przetwarzaniu przez następne loadery.
npm install coffee-script coffee-loader --save

21. Transpilacja
dogsHead = require('./dog/head');
dogsBody = require('./dog/body');
console.log(dogsHead());
console.log(dogsBody());
head = -> "dogs head"
module.exports = head;
assets/dog/head.coffee
assets/dog.js
body = -> "dogs body"
module.exports = body;
assets/dog/body.coffee
dog.js
head.coffee body.coffee

22. Transpilacja
/uszanowanko/webpack> webpack --display-modules

23. Transpilacja
/uszanowanko/webpack> webpack --display-modules
Hash: 035ccd9c22a0de9b0c61
Version: webpack 1.12.14
Time: 115ms
Asset Size Chunks Chunk Names
cat-bundle.js 4.02 kB 0 [emitted] cat
1.1-bundle.js 434 bytes 1 [emitted]
dog-bundle.js 2.13 kB 2 [emitted] dog
[0] ./cat.js 151 bytes {0} [built]
[0] ./dog.js 122 bytes {2} [built]
[1] ./cat/head.js 66 bytes {1} [built]
[2] ./cat/body.js 66 bytes {1} [built]
[3] ./dog/head.coffee 80 bytes {2} [built]
[4] ./dog/body.coffee 80 bytes {2} [built]

24. Transpilacja
/uszanowanko/webpack> webpack --display-modules
Hash: 035ccd9c22a0de9b0c61
Version: webpack 1.12.14
Time: 115ms
Asset Size Chunks Chunk Names
cat-bundle.js 4.02 kB 0 [emitted] cat
1.1-bundle.js 434 bytes 1 [emitted]
dog-bundle.js 2.13 kB 2 [emitted] dog
[0] ./cat.js 151 bytes {0} [built]
[0] ./dog.js 122 bytes {2} [built]
[1] ./cat/head.js 66 bytes {1} [built]
[2] ./cat/body.js 66 bytes {1} [built]
[3] ./dog/head.coffee 80 bytes {2} [built]
[4] ./dog/body.coffee 80 bytes {2} [built]

25. Grafiki w skryptach
var $ = require('jquery');
var catHeadImage = require('../images/cat_head.png');
$('.head').append('<img src="'+catHeadImage+'" />');
//...
assets/cat/head.js
module.exports = {
//...
module: {
loaders: [
{ test: /.coffee$/, loader: "coffee-loader" },
{ test: /.(png|jpg|gif|bmp)/, loader: "file" }
]
}
};
webpack.config.js

26. Grafiki w skryptach
/uszanowanko/webpack> webpack --display-modules

27. Grafiki w skryptach
/uszanowanko/webpack> webpack --display-modules
Hash: a2bd8c43ab5d095496be
Version: webpack 1.12.14
Time: 342ms
Asset Size Chunks Chunk Names
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
cat-bundle.js 4.02 kB 0 [emitted] cat
1.1-bundle.js 268 kB 1 [emitted]
dog-bundle.js 2.14 kB 2 [emitted] dog
[0] ./cat.js 151 bytes {0} [built]
[0] ./dog.js 122 bytes {2} [built]
[1] ./cat/head.js 224 bytes {1} [built]
[2] ../~/jquery/dist/jquery.js 259 kB {1} [built]
[3] ./images/cat_head.png 82 bytes {1} [built]
[4] ./cat/body.js 66 bytes {1} [built]
[5] ./dog/head.coffee 80 bytes {2} [built]
[6] ./dog/body.coffee 80 bytes {2} [built]

28. CSS
require('../styles/cats_body');
//...
assets/cat/body.js
.body{
width: 300px;
height: 250px;
background: url('~/images/cat_body.png');
}
assets/styles/cats_body.scss

29. CSS
module.exports = {
//...
resolve: {
extensions: ['', '.coffee', '.js', '.scss']
},
module: {
loaders: [
//...
{ test: /.scss$/, loaders: ["style", "css", "sass"] }
]
}
};
webpack.config.js

30. CSS
/uszanowanko/webpack> webpack --display-modules

31. CSS
/uszanowanko/webpack> webpack --display-modules
Hash: bdb3652f781ccb917057
Version: webpack 1.12.14
Time: 2366ms
Asset Size Chunks Chunk Names
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
cat-bundle.js 4.02 kB 0 [emitted] cat
1.1-bundle.js 279 kB 1 [emitted]
dog-bundle.js 2.12 kB 2 [emitted] dog
[0] ./cat.js 151 bytes {0} [built]
[0] ./dog.js 122 bytes {2} [built]
[1] ./cat/head.js 224 bytes {1} [built]
[2] ../~/jquery/dist/jquery.js 259 kB {1} [built]
[3] ./images/cat_head.png 82 bytes {1} [built]
[4] ./cat/body.js 99 bytes {1} [built]
[5] ./styles/cats_body.scss 1.06 kB {1} [built]
[6] ../~/css-loader!../~/sass-loader!./styles/cats_body.scss 268 bytes {1} [built]
[7] ../~/css-loader/lib/css-base.js 1.51 kB {1} [built]
[8] ./images/cat_body.png 82 bytes {1} [built]
[9] ../~/style-loader/addStyles.js 7.21 kB {1} [built]
[10] ./dog/head.coffee 80 bytes {2} [built]
[11] ./dog/body.coffee 80 bytes {2} [built]

32. Test webpacka
<html>
<head>
<meta charset="UTF-8">
<title>Cat</title>
<script src="compiled/cat-bundle.js"></script>
</head>
<body>
<div class="head"></div>
<div class="body"></div>
</body>
</html>
cat.html

33. Test webpacka
<html>
<head>
<meta charset="UTF-8">
<title>Cat</title>
<script src="compiled/cat-bundle.js"></script>
</head>
<body>
<div class="head"></div>
<div class="body"></div>
</body>
</html>
cat.html

34. Test webpacka
<html>
<head>
<meta charset="UTF-8">
<title>Cat</title>
<script src="compiled/cat-bundle.js"></script>
</head>
<body>
<div class="head"></div>
<div class="body"></div>
</body>
</html>
cat.html

35. Test webpacka

36. Test webpacka

37. Test webpacka

38. Krok trzeci
Dodajemy dodatkowe wtyczki (plugins)
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
//...
plugins: [
new ExtractTextPlugin("styles-[name].css", {allChunks:true})
],
module: {
loaders: [
//...
{ test: /.scss$/, loader: ExtractTextPlugin.extract(["css", "sass"], {publicPath: ''}) }
]
}
};
webpack.config.js
Wtyczki to moduły, które pozwalają na wykonanie dodatkowych
czynności podczas działania skryptu webpacka. Mogą dodawać pliki,
usuwać je lub ponownie przetwarzać.

39. Ekstrakcja CSS
/uszanowanko/webpack> webpack

40. Ekstrakcja CSS
/uszanowanko/webpack> webpack
Hash: 1d336bd3e0dba1633bcc
Version: webpack 1.12.12
Time: 749ms
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
cat-bundle.js 4.02 kB 0 [emitted] cat
1.1-bundle.js 268 kB 1 [emitted]
dog-bundle.js 2.15 kB 2 [emitted] dog
styles-cat.css 100 bytes 0 [emitted] cat
[0] ./cat.js 151 bytes {0} [built]
[0] ./dog.js 122 bytes {2} [built]
[1] ./cat/head.js 224 bytes {1} [built]
[4] ./cat/body.js 99 bytes {1} [built]
+ 5 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
+ 3 hidden modules

41. Wspólne fragmenty kodu

42. Wspólne fragmenty kodu
uszanowanko = require('./common/uszanowanko');
uszanowanko();
//...
uszanowanko = require('./common/uszanowanko');
uszanowanko();
//...
assets/dog.js
assets/cat.js
$ = require('jquery');
wow = function(){
$('body').prepend('<h2>Uszanowanko, wow!</h2>');
};
module.exports = wow;
assets/common/uszanowanko.js
dog.jscat.js
uszanowanko.js

43. Wspólne fragmenty kodu
var webpack = require('webpack');
module.exports = {
//...
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'common.js',
chunks: ['dog', 'cat']
}),
//...
]
};
webpack.config.js

44. Wspólne fragmenty kodu
/uszanowanko/webpack> webpack

45. Wspólne fragmenty kodu
/uszanowanko/webpack> webpack
Hash: 644d6d78fe56c9b09505
Version: webpack 1.12.12
Time: 748ms
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
cat-bundle.js 605 bytes 0 [emitted] cat
1.1-bundle.js 1.21 kB 1 [emitted]
dog-bundle.js 879 bytes 2 [emitted] dog
common.js 271 kB 3 [emitted] common
styles-cat.css 100 bytes 0 [emitted] cat
[0] ./cat.js 225 bytes {0} [built]
[0] ./dog.js 186 bytes {2} [built]
[1] ./common/uszanowanko.js 128 bytes {3} [built]
[3] ./cat/head.js 224 bytes {1} [built]
[5] ./cat/body.js 99 bytes {1} [built]
+ 5 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
+ 3 hidden modules

46. Wspólne fragmenty kodu
/uszanowanko/webpack> webpack
Hash: 644d6d78fe56c9b09505
Version: webpack 1.12.12
Time: 748ms
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
cat-bundle.js 605 bytes 0 [emitted] cat
1.1-bundle.js 1.21 kB 1 [emitted]
dog-bundle.js 879 bytes 2 [emitted] dog
common.js 271 kB 3 [emitted] common
styles-cat.css 100 bytes 0 [emitted] cat
[0] ./cat.js 225 bytes {0} [built]
[0] ./dog.js 186 bytes {2} [built]
[1] ./common/uszanowanko.js 128 bytes {3} [built]
[3] ./cat/head.js 224 bytes {1} [built]
[5] ./cat/body.js 99 bytes {1} [built]
+ 5 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
+ 3 hidden modules
/uszanowanko/webpack> webpack
Hash: 1d336bd3e0dba1633bcc
Version: webpack 1.12.12
Time: 749ms
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
cat-bundle.js 4.02 kB 0 [emitted] cat
1.1-bundle.js 268 kB 1 [emitted]
dog-bundle.js 2.15 kB 2 [emitted] dog
styles-cat.css 100 bytes 0 [emitted] cat
[0] ./cat.js 151 bytes {0} [built]
[0] ./dog.js 122 bytes {2} [built]
[1] ./cat/head.js 224 bytes {1} [built]
[4] ./cat/body.js 99 bytes {1} [built]
+ 5 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
+ 3 hidden modules

47. Wspólne fragmenty kodu
/uszanowanko/webpack> webpack
Hash: 644d6d78fe56c9b09505
Version: webpack 1.12.12
Time: 748ms
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
cat-bundle.js 605 bytes 0 [emitted] cat
1.1-bundle.js 1.21 kB 1 [emitted]
dog-bundle.js 879 bytes 2 [emitted] dog
common.js 271 kB 3 [emitted] common
styles-cat.css 100 bytes 0 [emitted] cat
[0] ./cat.js 225 bytes {0} [built]
[0] ./dog.js 186 bytes {2} [built]
[1] ./common/uszanowanko.js 128 bytes {3} [built]
[3] ./cat/head.js 224 bytes {1} [built]
[5] ./cat/body.js 99 bytes {1} [built]
+ 5 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
+ 3 hidden modules

48. Inne ciekawe wtyczki
- UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików
- DedupePlugin - wyszukuje zduplikowane pliki i je łączy
- ProvidePlugin - automatycznie importuje moduły na podstawie zmiennych
- CleanupPlugin - czyści folder na kompilowane pliki przed emisją nowych
- AssetsPlugin - zrzuca do pliku JSON informacje o wyemitowanych plikach,
które należy dołączyć do dokumentu HTML

49. Inne ciekawe wtyczki
- UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików
- DedupePlugin - wyszukuje zduplikowane pliki i je łączy
- ProvidePlugin - automatycznie importuje moduły na podstawie zmiennych
- CleanupPlugin - czyści folder na kompilowane pliki przed emisją nowych
- AssetsPlugin - zrzuca do pliku JSON informacje o wyemitowanych plikach,
które należy dołączyć do dokumentu HTML
{
"cat": {
"js": "compiled/cat-bundle.js",
"css": "compiled/styles-cat.css"
},
"dog": {
"js": "compiled/dog-bundle.js"
},
"common": {
"js": "compiled/common.js"
}
}

50. Krok ostatni
Inne dodatki i ustawienia
module.exports = {
//...
devtool: 'source-map'
};

51. Krok ostatni
Inne dodatki i ustawienia
module.exports = {
//...
devtool: 'source-map'
};

52. Krok ostatni
Inne dodatki i ustawienia
module.exports = {
//...
devtool: 'source-map'
};

53. Krok ostatni
Inne dodatki i ustawienia
module.exports = {
//...
devtool: 'source-map'
};

54. Tryb watch
/uszanowanko/webpack> webpack --watch --progress

55. Tryb watch
/uszanowanko/webpack> webpack --watch --progress
Hash: 644d6d78fe56c9b09505
Version: webpack 1.12.12
Time: 748ms
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
5e8e95d00a8673e044ce5ae85a86d22f.png 134 kB [emitted]
cat-bundle.js 605 bytes 0 [emitted] cat
1.1-bundle.js 1.21 kB 1 [emitted]
dog-bundle.js 879 bytes 2 [emitted] dog
common.js 271 kB 3 [emitted] common
styles-cat.css 100 bytes 0 [emitted] cat
[0] ./cat.js 225 bytes {0} [built]
[0] ./dog.js 186 bytes {2} [built]
[1] ./common/uszanowanko.js 128 bytes {3} [built]
[3] ./cat/head.js 224 bytes {1} [built]
[5] ./cat/body.js 99 bytes {1} [built]
+ 5 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [ emitted]
+ 3 hidden modules

56. Tryb watch
common.js 271 kB 3 [emitted] common
styles-cat.css 100 bytes 0 [emitted] cat
[0] ./cat.js 225 bytes {0} [built]
[0] ./dog.js 186 bytes {2} [built]
[1] ./common/uszanowanko.js 128 bytes {3} [built]
[3] ./cat/head.js 224 bytes {1} [built]
[5] ./cat/body.js 99 bytes {1} [built]
+ 5 hidden modules
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
44402ef52711a576ca7d32819295f64e.png 188 kB [emitted]
+ 3 hidden modules
Hash: 23ce8cce5f54a398b346
Version: webpack 1.12.12
Time: 13ms
Asset Size Chunks Chunk Names
cat-bundle.js 620 bytes 0 [emitted] cat
styles-cat.css 142 bytes 0 [emitted] cat
cat-bundle.js.map 507 bytes 0 [emitted] cat
styles-cat.css.map 91 bytes 0 [emitted] cat
[0] ./cat.js 201 bytes {0} [built]
+ 9 hidden modules

57. Serwer developerski
npm install webpack-dev-server -g
webpack-dev-server --content-base .
// http://localhost:8080/cat.html

58. Serwer developerski - autorealod
// Poprzez iframe --->
// http://localhost:8080/webpack-dev-server/cat.html
webpack-dev-server
// Standardowe
// http://localhost:8080/cat.html
webpack-dev-server --inline

59. Hot module reload
webpack-dev-server --inline --hot
if(module.hot) {
module.hot.accept("./common/uszanowanko" , function() {
var uszanowanko = require('./common/uszanowanko' );
var $ = require('jquery');
$('h2').remove();
uszanowanko();
});
}

60. Podsumowanie
Dlaczego chcesz używać webpacka?
- Potrzebujesz skalowalności w projekcie
- Masz duży projekt z dużą ilością wspólnych zależności
- Chcesz łatwo skonfigurować transpilację
- Lubisz porządek w zależnościach
- Nie lubisz zmiennych globalnych
A dlaczego nie chcesz?
- Masz istniejący projekt, który będzie trzeba migrować
- Bo naprawdę potrzebujesz task-runnera, a nie bundlera ;)

61. Kod z prezentacji
https://github.com/marcingajda/uszanowanko-webpack

62. Pytania?
@marcingajda91