Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka

1,277 views

Published on

Narzędzia takie jak Grunt i Gulp są coraz częściej wypierane z użycia przez swojego następce, webpacka. Wynika to z prostego powodu – w kwestii pakowania assetów rozwiązuje on domyślnie wiele problemów, z którymi tamte narzędzia radzą sobie gorzej. Ta prezentacja omawia te zagadnienia i pokazuje jak skonfigurować webpacka od zera.

Published in: Software
  • Be the first to comment

Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka

  1. 1. webpack czym jest i dlaczego chcesz go używać Marcin Gajda The Software House
  2. 2. W skrócie webpack przetwarza moduły i ich zależności i tworzy statyczne assety dla naszej aplikacji
  3. 3. Instalacja i uruchamianie npm init sudo npm install webpack -g webpack ./entry_point.js bundle.js # lub... webpack --config webpack.config.js
  4. 4. Plik konfiguracyjny webpack.config.js module.exports = { context: __dirname+'/assets', entry: { user: './user.js', }, output: { path: 'compiled', filename: '[name]-bundle.js', publicPath: 'compiled/' }, module: {}, plugins: {}, resolve: {} }; assets/user.js → compiled/user-bundle.js
  5. 5. var userProfile = require('./user/profile.js'); var userContacts = require('./user/contacts.js'); userProfile.doSomething(); userContacts.doMore(); assets/user.js Importowanie statyczne var userProfile = { doSomething: function(){ return 'hello' } } module.exports = userProfile; assets/user/profile.js
  6. 6. /meet_js/webpack> webpack --display-modules Importowanie statyczne
  7. 7. /meet_js/webpack> webpack --display-modules Hash: f7f0a8c9c6d85acfaf68 Version: webpack 1.12.14 Time: 57ms Asset Size Chunks Chunk Names user-bundle.js 2.05 kB 0 [emitted] user [0] ./user.js 122 bytes {0} [built] [1] ./user/profile.js 66 bytes {0} [built] [2] ./user/contacts.js 66 bytes {0} [built] /meet_js/webpack> Importowanie statyczne
  8. 8. Importowanie dynamiczne require(['./user/profile.js, './user/contacts.js'], function(userProfile, userContacts){ userProfile.doSomething(); userContacts.doMore(); } ); var userProfile = { doSomething: function(){ return 'hello' } } module.exports = userProfile; assets/user/profile.js assets/user.js
  9. 9. Importowanie dynamiczne /meet_js/webpack> webpack --display-modules
  10. 10. Importowanie dynamiczne /meet_js/webpack> webpack --display-modules Hash: f7f0a8c9c6d85acfaf68 Version: webpack 1.12.14 Time: 57ms Asset Size Chunks Chunk Names user-bundle.js 4.02 kB 0 [emitted] user 1.1-bundle.js 434 kB 1 [emitted] [0] ./user.js 151 bytes {0} [built] [1] ./user/profile.js 66 bytes {1} [built] [2] ./user/contacts.js 66 bytes {1} [built] /meet_js/webpack>
  11. 11. Wiele “entry pointów” module.exports = { //... entry: { user: './user', admin: './admin' //coffeescript! }, output: { //... }, resolve: { extensions: ['', '.js', '.coffee', '.ts'] } module: {}, plugins: {}, }; webpack.config.js assets/user.js → compiled/user-bundle.js assets/admin.coffee → compiled/admin-bundle.js
  12. 12. Loadery module.exports = { //... 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
  13. 13. adminUsers = require('./admin/users') adminSettings = require('./user/settings') adminUsers.doSomething() adminSettings.doMore() assets/admin.coffee adminUsers = -> doSomething: -> 'hello' module.exports = adminUsers assets/admin/users.coffee Loadery
  14. 14. Loadery /meet_js/webpack> webpack --display-modules
  15. 15. Loadery /meet_js/webpack> webpack --display-modules Hash: 035ccd9c22a0de9b0c61 Version: webpack 1.12.14 Time: 115ms Asset Size Chunks Chunk Names user-bundle.js 4.02 kB 0 [emitted] user 1.1-bundle.js 434 bytes 1 [emitted] admin-bundle.js 2.13 kB 2 [emitted] admin [0] ./user.js 151 bytes {0} [built] [0] ./admin.js 122 bytes {2} [built] [1] ./user/profile.js 66 bytes {1} [built] [2] ./user/contacts.js 66 bytes {1} [built] [3] ./admin/users.coffee 80 bytes {2} [built] [4] ./admin/settings.coffee 80 bytes {2} [built]
  16. 16. Loadery /meet_js/webpack> webpack --display-modules Hash: 035ccd9c22a0de9b0c61 Version: webpack 1.12.14 Time: 115ms Asset Size Chunks Chunk Names user-bundle.js 4.02 kB 0 [emitted] user 1.1-bundle.js 434 bytes 1 [emitted] admin-bundle.js 2.13 kB 2 [emitted] admin [0] ./user.js 151 bytes {0} [built] [0] ./admin.js 122 bytes {2} [built] [1] ./user/profile.js 66 bytes {1} [built] [2] ./user/contacts.js 66 bytes {1} [built] [3] ./admin/users.coffee 80 bytes {2} [built] [4] ./admin/settings.coffee 80 bytes {2} [built]
  17. 17. Importowanie grafik i innych assetów var defaultAvatar = require('../images/avatar.png'); //... var avatar = user.avatar || defaultAvatar; module.exports = { //... module: { loaders: [ { test: /.coffee$/, loader: "coffee-loader" }, { test: /.(png|jpg|gif|bmp)/, loader: "file" } ] } };
  18. 18. require('../styles/theme'); //... assets/user.js Importowanie CSS module.exports = { //... resolve: { extensions: ['', '.coffee', '.js', '.scss'] }, module: { loaders: [ //... { test: /.scss$/, loaders: ["style", "css", "sass"] } ] } }; webpack.config.js
  19. 19. Importowanie CSS
  20. 20. Importowanie CSS
  21. 21. 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ć. Ekstrakcja CSS
  22. 22. Wspólne fragmenty kodu var webpack = require('webpack'); module.exports = { //... plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js', chunks: ['user', 'admin'] }), //... ] }; webpack.config.js
  23. 23. Inne przydatne wtyczki - UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików - DefinePlugin - dorzuca stałe do naszego JavaScript - 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
  24. 24. Inne przydatne wtyczki - UglifyJsPlugin - używa biblioteki UglifyJS by zmniejszyć rozmiar plików - DefinePlugin - dorzuca stałe do naszego JavaScript - 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 { "user": { "js": "compiled/user-bundle.js", "css": "compiled/styles-user.css" }, "admin": { "js": "compiled/admin-bundle.js" }, "common": { "js": "compiled/common.js" } }
  25. 25. Sourcemapy module.exports = { //... devtool: 'source-map' };
  26. 26. Sourcemapy module.exports = { //... devtool: 'source-map' };
  27. 27. Serwer developerski npm install webpack-dev-server -g webpack-dev-server --content-base . // http://localhost:8080/ // Autoreload przez iframe // http://localhost:8080/webpack-dev-server/ webpack-dev-server // Standardowy autoreload // http://localhost:8080/ webpack-dev-server --inline
  28. 28. Hot module reload webpack-dev-server --inline --hot if(module.hot) { module.hot.accept("./some/module", function() { var lib = require('./some/module); lib.removeFromWebsite(); lib.addToWebsite(); }); }
  29. 29. 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 ;)
  30. 30. Pytania? @marcingajda91

×