Znając zarys ogólnych funkcjonalności Webpacka postaram się pokazać kilka przykładów jego zastosowania.
Nowy projekt
Rozpoczniemy od utworzenia katalogu w odpowiadającym nam miejscu
mkdir webpack-testInicjalizujemy manadżera pakietów
cd webpack-test npm initi przechodzimy przez wszystkie instrukcje, które zostaną wyświetlone.
Teraz jesteśmy gotowi aby pobrać bibliotekę:
npm install webpack --save-devW ten sposób zostanie ona pobrana, a jej definicja dodana od razu do pliku packages.json jako zależność deweloperska.
Tworzymy potrzebne pliki
mkdir lib www touch webpack.config.js touch lib/index.jsuruchamiamy edytor
atom ./i wypełniamy plik ./webpack.config.js następującą treścią
var webpack = require('webpack'), path = require('path'); module.exports = { debug: true, entry: { main: './lib/index.js' }, output: { path: path.join(__dirname, 'www'), filename: '[name].js' }, module: { loaders: [] } };
Tak skonfigurowany projekt za plik wejściowy kompilacji postrzega ./lib/index.js, a jej wynik trafi do katalogu ./www
Kompilację przeprowadzamy przy użyciu następujących komend.
Debug mode:
webpackProduction mode (pliki zostaną zminifikowane)
webpack -p
Testy
Przetestujmy działanie za pomocą modułu-nakładki na akcje konsolowe.W katalogu lib tworzymy plik consoleAdapter.js o następującej treści:
module.exports = { log: function(value) { console.log(value); } };Następnie plik index.js wypełniamy taką treścią
var consoleAdapter = require('./consoleAdapter.js'); consoleAdapter.log('Hello world!');Uruchamiamy kompilację i sprawdzamy czy wszystko działa:
webpack
node ./www/main
W konsoli powinno ukazać się Hello world!
Użycie loaderów
ECMAScript 6
Instalujemy odpowiedni loadernpm install babel-loader --save-devDodajemy go do konfiguracji webpacka
loaders: [{ test: /\.es6.js$/, loader: "babel-loader" } ]i zmieniamy rozszerzenie pliku console.js na .es6, a samą jego treść na następującą:
module.exports = { log: (value) => console.log(value) };kolejna kompilacja powinna przejść bez problemów, a rezultat zadziałać w ten sam sposób.
CSS i SASS
Do kompilacji plików CSS i SASS przydatne będą następujące loadery.- css-loader
- autoprefixer-loader - dzięki niemu nie martwimy się o dodawanie prefixów dla konkretnych przeglądarek
- sass-loader
loaders: [{ test: /\.css$/, loader: "css-loader!autoprefixer-loader" }, { test: /\.scss$/, loader: "css-loader!sass-loader" } { test: /\.es6.js$/, loader: "babel-loader" } ]
HTML i obrazki
- html-loader
- file-loader
{ test: /\.html$/, loader: "html-loader" },{ test: /\.(png|jpg|gif)$/, loader: "file-loader?name=img/img-[hash:6].[ext]" },
Globalne moduły
Czasami potrzebujemy mieć dostęp do pewnych modułów w globalnej przestrzeni naszej aplikacji w tym celu używamy expose-loader.
W tym konkretnym przypadku zależy nam aby mieć globalny dostęp do lodash'a pod znakiem _.
{ test: require.resolve("lodash"), loader: 'expose?_' }
Podsumowanie
Jak widzimy kilkoma prostymi modułami i definicjami w pliku konfiguracyjnym jesteśmy w stanie wykonać na prawdę skomplikowane operacje. I nie potrzebujemy tutaj żadnego menadżera zadań. Jak najbardziej kompilację Webpacka można przy pomocy takiego uruchamiać.
Zachęcam do eksperymentowania z loaderami i testowania ich możliwości.
Brak komentarzy:
Prześlij komentarz