{"id":22367168,"url":"https://github.com/sukhoy94/webpack-101","last_synced_at":"2025-03-26T15:52:01.652Z","repository":{"id":239291327,"uuid":"799120062","full_name":"sukhoy94/webpack-101","owner":"sukhoy94","description":"Tutorial wprowadzający w podstawy działania narzędzia Webpack","archived":false,"fork":false,"pushed_at":"2024-05-12T07:46:22.000Z","size":47,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T17:13:25.195Z","etag":null,"topics":["npm","tutorial","webpack5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sukhoy94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-11T08:33:49.000Z","updated_at":"2024-05-18T17:57:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"c8eceaa9-d7bd-455c-9f14-dc3cd30f1ac3","html_url":"https://github.com/sukhoy94/webpack-101","commit_stats":null,"previous_names":["sukhoy94/webpack-101"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukhoy94%2Fwebpack-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukhoy94%2Fwebpack-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukhoy94%2Fwebpack-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sukhoy94%2Fwebpack-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sukhoy94","download_url":"https://codeload.github.com/sukhoy94/webpack-101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245689452,"owners_count":20656414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["npm","tutorial","webpack5"],"created_at":"2024-12-04T18:16:38.244Z","updated_at":"2025-03-26T15:52:01.644Z","avatar_url":"https://github.com/sukhoy94.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[Jak działa Webpack - wideo na YouTube](https://youtu.be/CmisCRhwfu4)\n\n# Spis Treści\n\n1. [Co to jest WebPack](#co-to-jest-webpack)\n2. [Jak Zacząć](#jak-zacząć)\n3. [Plik konfiguracyjny webpack.config.js](#plik-konfiguracyjny-webpackconfigjs)\n4. [Style CSS](#style-css)\n5. [Kompilacja Sass/Scss](#kompilacja-sassscss)\n6. [Wydzielenie skompilowanego CSS do oddzielnego pliku](#wydzielenie-skompilowanego-css-do-oddzielnego-pliku)\n7. [Production oraz Development Mode](#production-oraz-development-mode)\n\n# Co to jest WebPack\nWebpack to narzędzie, które pomaga programistom w zarządzaniu kodem ich aplikacji webowych. Wyobraź sobie, że masz wiele plików JavaScript, CSS i innych, które należy połączyć w jeden, zoptymalizowany plik, aby strona internetowa działała szybko i sprawnie. Webpack robi właśnie to - zbiera wszystkie te pliki i tworzy z nich jeden, zoptymalizowany zestaw, gotowy do użycia przez przeglądarkę internetową. Dzięki Webpackowi możesz także łatwo zarządzać zależnościami między plikami, co ułatwia rozwijanie i utrzymanie dużych projektów webowych. Innymi słowy, Webpack pomaga zorganizować i zoptymalizować kod, co przekłada się na lepszą wydajność i łatwiejsze zarządzanie projektem.\n\n\n[Dokumentacja Webpacka](https://webpack.js.org/concepts/)\n\n\n## Jak Zacząć\n\nAby zacząć korzystać z Webpacka, wykonaj następujące kroki:\n\n1. Zainicjuj nowy projekt NPM, jeśli jeszcze tego nie zrobiłeś, wykonując polecenie:\n   ```bash\n   npm init -y\n\n2. Zainstaluj Webpack jako zależność deweloperską, używając polecenia:\n\n```bash \nnpm install webpack --save-dev\n```\n\n3. Teraz jak wpiszesz w konsoli webpack to zostaniesz poproszony o doistalowanie \nwebpack-cli.\n   Webpack-CLI to interfejs wiersza poleceń dla narzędzia Webpack. Jest to osobny pakiet, który zawiera polecenia CLI (Command Line Interface) do zarządzania konfiguracją Webpacka i uruchamiania procesu budowania. Dzięki webpack-cli możesz łatwo uruchamiać Webpack z poziomu wiersza poleceń, korzystając z różnych opcji i flag, takich jak uruchamianie określonych konfiguracji, trybów środowiskowych i wiele innych. W skrócie, webpack-cli ułatwia korzystanie z Webpacka poprzez interakcję z nim za pomocą wiersza poleceń.\n\n4. Instalujemy webpack-cli\n\n```\nnpm install -D webpack-cli\n```\n\n5. Po tym jak wpiszemy w konsoli webpack - to będziemy mieli komunitak typy\n```\nModule not found: Error: Can't resolve './src' ....\n```\nDzieje się to przez to że nie mamy pliku konfiguracyjnego i webpack używa swoich domyślnych ustawień. Próbuje znaleźć plik index.js w folderze src. \nUtworzmy taką strukture\n\n```\nmkdir src \u0026\u0026 touch ./src/index.js\n```\n\n6. Następnie odpalamy znowy komendę webpack, w wyniku powstanie folder ./dist z plikiem main.js.\nTen plik zawiera skompilowaną wersje naszego kodu z ./src/index.js. Czyli suma sumarum skorzystaliśmy z webpack nawet bez żadnej konfiguracji\n\n## Jak skompilować pliki za pomocą webpack? \nWpisz w konsoli polecenie:\n```\nwebpack\n```\n\n## webpack --watch\n\nŻeby za każdym razem nie wpisywać webpack, \nmożna go uruchomić jako \n```\nwebpack --watch\n```\n\nWtedy wszystkie zmiany entry pliku będą monitorowane na bieżąco i będą kompilowane.\nUważaj że jeżeli zmieniasz konfigi w webpack.config.js, to żeby webpack ich \nzałapał trzeba go ponownie uruchomić (wpisujać webpack bądź webpack --watch\n\n\n)\n\n## Plik konfiguracyjny webpack.config.js\n\nWebpack korzysta z pliku \nkonfiguracyjnego o nazwie `webpack.config.js`, w którym definiowane są różne ustawienia i opcje dla procesu budowania.\nOto jak wygląda podstawowa konfiguracja które określa\ntzw. punkty entry/output:\n```\nconst path = require(\"path\");\nmodule.exports = {\n    entry: './src/index.js',\n    output: {\n        path: path.resolve(__dirname, './dist'),\n        filename: 'main.js'\n    },\n};\n```\nOkreślamy plik entry oraz ścieżke gdzie będziemy nasz kod \"pakować\".\n\n### Style css\nUtwórzmy sobie 2 pliki: index.html oraz style.css\n\n```\ntouch index.html \u0026\u0026 touch src/style.css\n```\n\nW index.html dodajmy skrypt z folderu dist\n```\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\"\n          content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003eDocument\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cscript src=\"./dist/main.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nw src/style.css dajmy jakiś przykładowy kod typu\n```\nbody {\n   background: blue;\n}\n```\ni zainkludujmy to jsa src/index.js\n```\nrequire('./style.css');\n```\n\nTeraz jakbyśmy sobie odpalili komendę webpack to dostaniemy\nbłąd typu:\n```\nERROR in ./src/style.css 1:5\nModule parse failed: Unexpected token (1:5)\nYou may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. \n```\nWszystko wskazuje na to że webpack nie rozumie css. I żeby\ncss zrozumiał potrzebuje tzw loadera.\nLoader w Webpacku to moduł, który pozwala na przetwarzanie plików o różnych formatach w trakcie procesu budowania. Kiedy Webpack napotyka importowane lub wymagane pliki innych typów niż JavaScript, takie jak pliki CSS, obrazy, czcionki czy inne, nie ma naturalnej zdolności do ich zrozumienia i obsługi. W takich przypadkach loadery są używane do przekształcenia tych plików w moduły JavaScript, które mogą być zintegrowane bezpośrednio do twojego projektu.\n\nA zatem instalujemy odpowiedni loader:\n```\nnpm install css-loader --save-dev\n```\nDodajemy obsługe tego w naszej konfiguracji w webpack.config.js\n```\nconst path = require(\"path\");\nmodule.exports = {\n    entry: './src/index.js',\n    output: {\n        path: path.resolve(__dirname, './dist'),\n        filename: 'main.js'\n    },\n    module: {\n        rules: [\n            {\n                test: /\\.css$/i,\n                use: [\"css-loader\"],\n            }\n        ]\n    }    \n};\n```\nPo tym jak skompilujemy projekt błędów już nie będzie,\ni style ładnie wyłądują w dist/main.js.\nNatomiast jak odpalimy index.html zauważymy że \nnic się nie zmieniło i tło nadal jest białe.\nDzieje się to dlatego że chociał webpack poradził sobie\nz parsowanie stylów, to musi jeszcze poradzić sobie z wstrzykiwaniem tych styli bezpośrednio\ndo strony www. I do tego mamy kolejny loader który się nazywa style-loader.\nA zatem:\n\n```\nnpm install style-loader --save-dev\n```\n\nconfig:\n```\nconst path = require(\"path\");\nmodule.exports = {\n    entry: './src/index.js',\n    output: {\n        path: path.resolve(__dirname, './dist'),\n        filename: 'main.js'\n    },\n    module: {\n        rules: [\n            {\n                test: /\\.css$/i,\n                use: [\"style-loader\", \"css-loader\"],\n            }\n        ]\n    }\n};\n```\ni ponownie kompilujemy projekt wpisując polecenie \n```\nwebpack\n```\n\nVuala! Mamy niebieskie tło.\nZauważ że w konfigu loaderki są wpisane w kolejności\n```\n[\"style-loader\", \"css-loader\"]\n```\n\nTo jest ważne, ponieważ webpack ich uruchamia od prawej do lewej, czyli najpierw musi ogarnąć css przez css-loader, a potem to już załadować do strony.\n\n## Kompilacja sass/scss\n\nW tej sekcji sobie opiszmy jak użyć webpack\ndo kompilacji sass, czyli czegoś takiego\n\n```\n$color: blue\nbody\n   background-color: $color\n```\nlub scss\n```\n$color: blue\nbody {\n   p {\n      color: $color;\n   }\n}\n```\n\nTu jest wszystko mocno podobne do kompilacji css.\nStwórzmy sobie plik style.sass\n```\ntouch src/style.sass\n```\n\nDajmy tam:\n```\n$color: blue\n\nbody\n  background-color: $color\n```\noraz include tego do index.js\n\n```\nrequire('./style.sass');\n```\n\nTeraz potrzebujemy loadera który umożliwi że webpack zrozumie syntax sass oraz sam sass.\n\n```\nnpm install sass-loader sass --save-dev\n```\n\nDodajemy rule dla sass/scss\n\n```\nconst path = require(\"path\");\nmodule.exports = {\n    entry: './src/index.js',\n    output: {\n        path: path.resolve(__dirname, './dist'),\n        filename: 'main.js'\n    },\n    module: {\n        rules: [\n            // rule dla kompilacji plików css\n            {\n                test: /\\.css$/i,\n                use: [\"style-loader\", \"css-loader\"],\n            },\n\n            // rule dla kompilacji plików sass/scss\n            {\n                test: /\\.s[ac]ss$/i,\n                use: [\"style-loader\", \"css-loader\", \"sass-loader\"],\n            },\n        ]\n    }\n};\n```\n\nTeraz wpiszmy webpack do konsoli - po odświeżeniu strony będziemy mieli niebiskie tło.\nCzyli działa!\n\nTujaj zauważ że mieliśmy najpierw użyć sass-loader, potem css-loader a potem już style-loader.\nTo dlatego że webpack z kod sass przekształca w kod css, no i żeby ten css zrozumiał potrzebuje css-loader.\n\n\n## Wydzielenie skompilowanego css do oddzielnego pliku\nPrawie zawsze cssy trzymamy w oddzielny pliku, więc omówmy jak to \nzrobić za pomocą webpack.\nZróbmy sobie strukture jak z sekcji dla kompilacji sass.\n\nŻeby wydzielić skompilowany css do pliku, użyjemy\nMiniCssExtractPlugin - to plugin dla Webpacka, który służy do ekstrahowania kodu CSS z bundla JavaScript i zapisywania \ngo do osobnych plików CSS. \n\nJest to przydatne, gdy chcesz\noddzielić kod CSS od kodu JavaScript, co może poprawić wydajność i ułatwić zarządzanie styli w Twojej aplikacji..\n\n\n```\nnpm install --save-dev mini-css-extract-plugin\n```\n\nTeraz w konfigu musimy zdefiniować plugin w sekcji plugins\noraz zamiast style-loader użyć właśnie tego pluginu\n\n```\nconst path = require(\"path\");\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\n\nmodule.exports = {\n    entry: './src/index.js',\n    output: {\n        path: path.resolve(__dirname, './dist'),\n        filename: 'main.js'\n    },\n    plugins: [new MiniCssExtractPlugin()],\n    module: {\n        rules: [\n            // rule dla kompilacji plików css\n            {\n                test: /\\.css$/i,\n                use: [\"style-loader\", \"css-loader\"],\n            },\n\n            // rule dla kompilacji plików sass/scss\n            {\n                test: /\\.s[ac]ss$/i,\n                use: [MiniCssExtractPlugin.loader, \"css-loader\", \"sass-loader\"],\n            },\n        ]\n    }\n};\n```\n\nPo tym kompilujemy projekt i w dist mamy main.css, który zawiera nasze style które były dodane do index.js.\n\n### production oraz development mode\n\n## Tryby deweloperski i produkcyjny w Webpacku\n\n### Tryb produkcyjny (production mode):\n\nW trybie produkcyjnym Webpack optymalizuje wydajność i rozmiar wynikowego bundla JavaScript. Może to obejmować minifikację kodu JavaScript, eliminację zbędnych lub powtarzających się fragmentów kodu, a także ekstrakcję kodu CSS do osobnych plików. Tryb produkcyjny jest przeznaczony do wykorzystania na żywym środowisku produkcyjnym, gdzie liczy się optymalna wydajność i minimalizacja rozmiaru plików.\n\n### Tryb deweloperski (development mode):\n\nW trybie deweloperskim Webpack skupia się na szybkości działania i ułatwia debugowanie aplikacji. Nie stosuje się do optymalizacji tak drastycznych kroków, jak w trybie produkcyjnym, co oznacza, że wynikowy bundel może być większy i mniej zoptymalizowany. Może zawierać informacje do debugowania (takie jak sourcemaps) i zachować bardziej czytelny kod.\n\nAby skonfigurować Webpack w trybie deweloperskim lub produkcyjnym, możesz użyć odpowiedniej flagi podczas uruchamiania Webpacka z poziomu wiersza poleceń lub ustawić odpowiednią wartość `mode` w pliku konfiguracyjnym Webpacka.\n\nPrzykład użycia flagi dla trybu produkcji:\n```bash\nwebpack --mode=production\n```\n\nPrzykład ustawienia trybu w pliku konfiguracyjnym Webpacka:\n\n```\nmodule.exports = {\n  mode: 'production', // lub 'development'\n  // reszta konfiguracji...\n};\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukhoy94%2Fwebpack-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsukhoy94%2Fwebpack-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsukhoy94%2Fwebpack-101/lists"}