Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka
-
Upload
marcin-gajda -
Category
Software
-
view
641 -
download
0
Transcript of Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka
webpackczym jest i dlaczego chcesz go używać
Marcin GajdaThe Software House
W skrócie
webpack przetwarza moduły i ich zależności i tworzy statyczne assety dla naszej aplikacji
Instalacja i uruchamianie
npm initsudo npm install webpack -g
webpack ./entry_point.js bundle.js# lub...webpack --config webpack.config.js
Plik konfiguracyjnywebpack.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
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
/meet_js/webpack> webpack --display-modules
Importowanie statyczne
/meet_js/webpack> webpack --display-modulesHash: f7f0a8c9c6d85acfaf68Version: webpack 1.12.14Time: 57ms Asset Size Chunks Chunk Namesuser-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
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
Importowanie dynamiczne/meet_js/webpack> webpack --display-modules
Importowanie dynamiczne/meet_js/webpack> webpack --display-modulesHash: f7f0a8c9c6d85acfaf68Version: webpack 1.12.14Time: 57ms Asset Size Chunks Chunk Namesuser-bundle.js 4.02 kB 0 [emitted] user1.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>
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.jsassets/admin.coffee → compiled/admin-bundle.js
Loaderymodule.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
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
Loadery/meet_js/webpack> webpack --display-modules
Loadery/meet_js/webpack> webpack --display-modulesHash: 035ccd9c22a0de9b0c61Version: webpack 1.12.14Time: 115ms Asset Size Chunks Chunk Namesuser-bundle.js 4.02 kB 0 [emitted] user1.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]
Loadery/meet_js/webpack> webpack --display-modulesHash: 035ccd9c22a0de9b0c61Version: webpack 1.12.14Time: 115ms Asset Size Chunks Chunk Namesuser-bundle.js 4.02 kB 0 [emitted] user1.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]
Importowanie grafik i innych assetówvar 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" } ] }};
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
Importowanie CSS
Importowanie CSS
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
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
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
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" }}
Sourcemapy
module.exports = { //... devtool: 'source-map'};
Sourcemapy
module.exports = { //... devtool: 'source-map'};
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
Hot module reloadwebpack-dev-server --inline --hot
if(module.hot) { module.hot.accept("./some/module", function() {
var lib = require('./some/module); lib.removeFromWebsite(); lib.addToWebsite();
});}
PodsumowanieDlaczego 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 ;)
Pytania?
@marcingajda91