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

webpack
czym jest i dlaczego chcesz go używać
Marcin Gajda
The 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 init
sudo npm install webpack -g
webpack ./entry_point.js bundle.js
# lub...
webpack --config webpack.config.js

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

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

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 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

Hash: f7f0a8c9c6d85acfaf68
Time: 57ms
1.1-bundle.js 434 kB 1 [emitted]
/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.js
assets/admin.coffee → compiled/admin-bundle.js

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

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

Loadery
Hash: 035ccd9c22a0de9b0c61
Time: 115ms
1.1-bundle.js 434 bytes 1 [emitted]
admin-bundle.js 2.13 kB 2 [emitted] admin
[0] ./admin.js 122 bytes {2} [built]
[3] ./admin/users.coffee 80 bytes {2} [built]
[4] ./admin/settings.coffee 80 bytes {2} [built]

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" }
]
}
};

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

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'
};

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 reload
webpack-dev-server --inline --hot
if(module.hot) {
module.hot.accept("./some/module", function() {
var lib = require('./some/module);
lib.removeFromWebsite();
lib.addToWebsite();
});
}

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 ;)

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

Similar to Webpack - Czym jest webpack i dlaczego chcesz go używać? - wersja krótka (20)

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