Generator konfiguracji Webpack
Generuj webpack.config.js dla projektu JavaScript: loaders (Babel, CSS, images), plugins (HtmlWebpackPlugin, MiniCssExtract), dev server.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Tryb
mode development: bez minifikacji, devtool eval-cheap-module-source-map
Opcje aktywne
reguły modułów, wtyczki, devServer i devtool zależnie od zaznaczeń
Rozmiar konfiguracji
gotowy plik webpack.config.js
Zależności dev
npm i -D @babel/core @babel/preset-env babel-loader clean-webpack-plugin css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "development",
entry: "src\/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "\/",
},
resolve: { extensions: [".js", ".json"] },
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [ {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
}],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpe?g|gif|svg|webp)$/i,
type: 'asset/resource',
},
{
test: /\.(woff2?|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: 'src/index.html' }),
new CleanWebpackPlugin(),
],
devtool: 'eval-cheap-module-source-map',
optimization: { splitChunks: { chunks: 'all' } },
devServer: {
static: { directory: path.join(__dirname, "dist") },
compress: true,
port: 8080,
historyApiFallback: true,
open: true,
},
};
| Opcja | Co dodaje do konfiguracji |
|---|---|
| Babel | reguła babel-loader (cacheDirectory) dla rozszerzeń skryptów; pakiety: babel-loader, @babel/core, @babel/preset-env (+ preset react/typescript) |
| TypeScript | rozszerzenia .ts/.tsx w resolve.extensions; bez Babela reguła ts-loader (transpileOnly: true); pakiety: ts-loader, typescript |
| React | rozszerzenia .jsx/.tsx w resolve.extensions; przy Babelu dodatkowo @babel/preset-react |
| CSS | reguła .css: style-loader + css-loader; przy „Wyodrębnij CSS” w production MiniCssExtractPlugin.loader |
| Sass | reguła .s[ac]ss: łańcuch loaderów CSS plus sass-loader; pakiety: sass, sass-loader |
| Zasoby (assets) | reguły type: asset/resource dla obrazów (png/jpe?g/gif/svg/webp) i fontów (woff2?/eot/ttf/otf) |
| HTML | HtmlWebpackPlugin z szablonem src/index.html; pakiet html-webpack-plugin |
| Wyodrębnij CSS | MiniCssExtractPlugin z filename styles.[contenthash].css — wyłącznie przy mode production |
| Serwer deweloperski | blok devServer: static (katalog wyjściowy), compress, port z formularza, historyApiFallback, open |
| Sourcemap | devtool: „source-map” w production albo „eval-cheap-module-source-map” w development |
| Cache busting | filename dostaje [contenthash] — wyłącznie przy mode production |
| Code splitting | optimization: { splitChunks: { chunks: „all” } } |
| Czyszczenie wyjścia | CleanWebpackPlugin usuwa katalog wyjściowy przed każdym buildem |
| Element konfiguracji | Wartość z silnika |
|---|---|
| Tryb / entry | development, src/index.js |
| Wyjście | dist/bundle.js, publicPath / |
| devtool | 'eval-cheap-module-source-map' |
| Wtyczki | 2 |
| Rozmiar pliku | 1 270 B |
| Instalacja | npm install --save-dev @babel/core @babel/preset-env babel-loader clean-webpack-plugin css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server |
| Sytuacja | Rekomendacja |
|---|---|
| Nowy projekt, standardowa aplikacja | Vite zwykle wygrywa: natywne ESM w dev-serverze, prostsza konfiguracja, krótszy start |
| Module Federation / micro-frontendy | Webpack — dojrzałe wsparcie Module Federation to wciąż jego unikalna moc |
| Niestandardowe loadery i stare wtyczki | Webpack — największy ekosystem loaderów; część starszych wtyczek nie ma odpowiednika w Vite |
| Działający projekt na webpacku | Zostań przy webpacku, dopóki koszt migracji przewyższa zysk z szybszego builda — przepisywanie konfiguracji rzadko się zwraca |
| Skomplikowane potoki zasobów (fonty, many entry) | Webpack — wieloentry i finezyjne reguły modułów są jego naturalnym terenem |
Warto wiedzieć — konfiguracja Webpack
Jak użyć wygenerowanego pliku
Zapisz wynik jako webpack.config.js w katalogu projektu (obok package.json), doinstaluj zależności z tabeli przykładu (npm install --save-dev …), a potem dodaj skrypty: webpack (build), webpack --watch i webpack serve dla devServer.
Development vs production
Tryb steruje minifikacją i domyślnymi optymalizacjami. Silnik świadomie uzależnia od trybu: cache busting ([contenthash]), wyodrębnianie CSS (MiniCssExtractPlugin) i devtool source-map włącza się tylko przy production.
Webpack a Vite
Nowe projekty częściej startują na Vite (natywne ESM, szybki dev-server). Webpack zostaje przy Module Federation, rozbudowanych niestandardowych loaderach i projektach, w których koszt migracji przewyższa zysk — pełne porównanie w ściądze poniżej wyniku.
Czego konfiguracja nie zawiera
To punkt startowy, nie kompletny projekt: szablon HTML wskazuje na src/index.html, a TypeScript bez Babela używa ts-loader w trybie transpileOnly (bez pełnego sprawdzania typów w buildzie). Dostosuj ścieżki entry i katalog wyjściowy do struktury projektu.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator konfiguracji Webpack — webpack.config.js dla Twojego projektu
Generator konfiguracji Webpack tworzy gotowy plik webpack.config.js dopasowany do Twojego projektu — React, Vue, Angular, TypeScript, SCSS, optymalizacja produkcyjna. Wygeneruj konfigurację bundlera bez żmudnego pisania od zera.
Czym jest Webpack?
Webpack to statyczny moduł bundler dla JavaScript (i nie tylko) — przetwarza każdy plik projektu jako moduł i buduje dependency graph, a następnie pakuje wszystko w optymalne bundle (pliki wyjściowe). Webpack obsługuje nie tylko JS, ale też CSS, SCSS, obrazy, czcionki i inne zasoby dzięki systemowi loaderów.
Webpack jest standardem w ekosystemach React (Create React App używał Webpacka do v5), Vue CLI i Angular. Choć nowsze narzędzia (Vite, Turbopack, Parcel, esbuild) zyskują popularność, Webpack wciąż dominuje w enterprise i legacy projektach.
Elementy konfiguracji Webpack
Entry — punkt wejścia bundlowania (np. ./src/index.js). Output — gdzie i jak zapisać bundle (path, filename). Loaders — przetwarzają pliki przed bundlowaniem: babel-loader (ES6+→ES5), ts-loader (TypeScript), css-loader + style-loader (CSS), sass-loader (SCSS), file-loader/url-loader (obrazy, czcionki). Plugins — HtmlWebpackPlugin (generuje HTML), MiniCssExtractPlugin (wyodrębnia CSS do pliku), TerserPlugin (minifikacja JS), DefinePlugin (zmienne środowiskowe). Mode — development (czytelny kod, szybki rebuild) lub production (minifikacja, tree-shaking).
Generator konfiguracji — opcje
Generator pozwala wybrać: framework (React/Vue/Vanilla JS), język (JavaScript/TypeScript), preprocesory CSS (CSS/SCSS/Less/PostCSS), obsługę obrazów i czcionek, opcje optymalizacji produkcyjnej (code splitting, lazy loading, bundle analysis), konfigurację dev server (hot reload, proxy). Wynikowy webpack.config.js jest gotowy do skopiowania do projektu.
Webpack vs. nowoczesne alternatywy
Vite — znacznie szybszy dev server (natywne ES modules, esbuild dla pre-bundlingu), ale wymaga przebudowy konfiguracji. Turbopack — następca Webpacka od Vercela, ultra-szybki (Rust), ale wciąż w fazie rozwoju. Parcel — zero-config bundler, prostszy niż Webpack, ale mniej elastyczny. Webpack wciąż wygrywa elastycznością konfiguracji i rozległym ekosystemem pluginów.
Najczęściej zadawane pytania
Jak skonfigurować Webpack dla projektu React z TypeScript?
Potrzebujesz: ts-loader lub babel-loader z @babel/preset-typescript, @babel/preset-react, HtmlWebpackPlugin. Podstawowy entry: ./src/index.tsx. Resolve extensions: ['.tsx', '.ts', '.jsx', '.js']. Użyj generatora wybierając React + TypeScript — dostaniesz kompletną, działającą konfigurację z odpowiednimi loaderami i pluginami.
Jak włączyć hot reload w Webpack Dev Server?
Dodaj do konfiguracji: devServer: { hot: true, port: 3000, historyApiFallback: true } i plugin: new webpack.HotModuleReplacementPlugin(). Uruchom: webpack serve --mode development. Webpack Dev Server automatycznie przebuduje bundle i odświeży przeglądarkę przy każdej zmianie pliku.
Jak optymalizować bundle Webpack dla produkcji?
Kluczowe techniki: mode: 'production' (automatyczna minifikacja, tree-shaking), code splitting (optimization.splitChunks), lazy loading (dynamic import()), analiza bundle (webpack-bundle-analyzer), kompresja (CompressionWebpackPlugin dla gzip/brotli), Long-term caching (content hash w nazwach plików). Generator tworzy konfigurację ze wszystkimi tymi optymalizacjami.
Jak rozwiązać problem "Cannot find module" w Webpack?
Sprawdź: resolve.extensions (czy plik ma właściwe rozszerzenie), resolve.alias (aliasy ścieżek dla @/components), resolve.modules (lokalizacje node_modules), poprawność entry point. Dodaj resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'] } by Webpack automatycznie próbował rozszerzeń.
Jaka jest różnica między webpack.config.js a package.json scripts?
webpack.config.js to plik konfiguracyjny bundlera — definiuje JAK bundlować (entry, output, loaders, plugins). package.json scripts to skróty komend npm — definiują JAK uruchamiać narzędzia (np. "build": "webpack --mode production"). Oba są komplementarne: scripts wywołują Webpack, który czyta webpack.config.js.
Czy wygenerowana konfiguracja działa z Webpack 5?
Tak, plik jest budowany pod Webpack 5. Jeśli w projekcie masz starszą wersję Webpacka, sprawdź składnię reguł oraz obsługę assetów, bo część ustawień może wymagać zmiany.
Jak uruchomić projekt po wygenerowaniu webpack.config.js?
Zapisz plik w katalogu głównym projektu i upewnij się, że masz zainstalowane webpack oraz webpack-cli. W development uruchom npx webpack serve, a build produkcyjny wykonasz przez npx webpack --mode production.
Czy przy TypeScripcie potrzebuję jeszcze Babela?
Nie musi być obu narzędzi naraz — ts-loader sam kompiluje TypeScript. Babel bywa potrzebny, gdy chcesz używać presetów i pluginów Babela, na przykład do polyfilli, albo gdy kompilujesz równocześnie pliki czystego JavaScriptu.
Dlaczego mój CSS nie trafia do osobnego pliku?
W trybie development style-loader wstrzykuje style do dokumentu przez JavaScript, więc osobny plik się nie pojawia. Plik CSS wyodrębnia MiniCssExtractPlugin, który generator dodaje w konfiguracji produkcyjnej.
Jak dodać proxy do backendu w dev serverze?
W sekcji devServer wpisz adres swojego API w polu target oraz reguły przepisania ścieżek. Dzięki temu żądania kierowane do endpointów backendu trafiają do serwera aplikacji, a nie do dev servera Webpacka.
Jak generator przekłada wybory na strukturę webpack.config.js
Generator działa jak translator z deklaracji na kod. Każdy wybór w formularzu odpowiada konkretnemu fragmentowi pliku: framework i język decydują o punkcie wejścia oraz o rozszerzeniach rozwiązywanych przez pole resolve.extensions, preprocesor CSS o zestaw reguł w module.rules, a opcje optymalizacji o blok optimization. Wynikiem jest obiekt eksportowany przez module.exports, który Webpack czyta przy starcie procesu budowania.
Kluczowy mechanizm to reguły module.rules. Dla każdego importu Webpack sprawdza, czy ścieżka pliku pasuje do wyrażenia regularnego w polu test, i jeśli pasuje, przepuszcza plik przez łańcuch loaderów z pola use. Łańcuch wykonuje się od prawej do lewej: w regule dla SCSS najpierw działa sass-loader (SCSS na CSS), potem css-loader (zamiana @import i url() na importy modułów), a na końcu loader wstrzykujący style — style-loader w development albo MiniCssExtractPlugin.loader w production. Kolejność w tablicy use nie jest więc dowolna i generator układa ją zgodnie z tym porządkiem.
Druga warstwa to pluginy, które nie przetwarzają pojedynczych plików, ale podpinają się do cyklu kompilacji. HtmlWebpackPlugin generuje plik HTML i wstrzykuje do niego znaczniki script oraz link z nazwami wynikowych bundle'ów, MiniCssExtractPlugin zbiera CSS w jeden plik, a DefinePlugin podmienia w kodzie stałe, takie jak process.env.NODE_ENV. Generator ustala też nazwy plików wyjściowych: w trybie produkcyjnym dodaje [contenthash], dzięki czemu zmiana treści zmienia nazwę pliku i wymusza odświeżenie cache przeglądarki.
Przykład: konfiguracja dla React + TypeScript + SCSS
- W generatorze zaznaczasz framework React, język TypeScript, preprocesor SCSS, obsługę obrazów i czcionek, optymalizację produkcyjną (code splitting, analiza bundle'a) oraz dev server z hot reloadem.
- Generator ustawia entry na ./src/index.tsx (odpowiednik domyślnego ./src/index.js), a w resolve.extensions dopisuje .ts i .tsx, aby import bez rozszerzenia trafiał na pliki TypeScript.
- Powstaje reguła dla plików .ts i .tsx z ts-loader oraz wykluczeniem katalogu node_modules — bez tego wykluczenia Webpack próbowałby kompilować również zależności z dysku.
- Druga reguła obejmuje pliki .scss: w production use to [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], a w development pierwszy element zastępuje style-loader.
- Do tablicy plugins trafiają HtmlWebpackPlugin (z szablonem Twojego index.html), MiniCssExtractPlugin (nazwa pliku z [contenthash]), DefinePlugin (process.env.NODE_ENV) oraz opcjonalnie BundleAnalyzerPlugin.
- W bloku optimization ląduje splitChunks z chunks: 'all' i runtimeChunk, a w output dopisane zostają clean: true i filename z [contenthash]. Następnie uruchamiasz npx webpack serve w development i npx webpack --mode production do builda — pliki wynikowe trafiają do katalogu dist.
Wybór w generatorze a odpowiadający fragment konfiguracji
| Wybór | Fragment webpack.config.js | Efekt w bundlu |
|---|---|---|
| Język: TypeScript | module.rules: test /\.tsx?$/, use: 'ts-loader' | pliki .ts i .tsx kompilowane do JS przed bundlowaniem |
| SCSS w production | use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] | CSS wyodrębniony do osobnego pliku |
| SCSS w development | use: ['style-loader', 'css-loader', 'sass-loader'] | style wstrzykiwane do dokumentu przez JavaScript |
| Obrazy i czcionki | use: 'file-loader' lub 'url-loader' | pliki kopiowane do katalogu wyjściowego albo inline jako data URI |
| HtmlWebpackPlugin | plugins: [new HtmlWebpackPlugin({ template: ... })] | HTML z automatycznie podpiętymi bundle'ami |
| DefinePlugin | plugins: [new DefinePlugin({ 'process.env.NODE_ENV': ... })] | stałe zamieniane w kodzie na etapie kompilacji |
| Code splitting | optimization.splitChunks: { chunks: 'all' } | wspólne zależności w osobnym chunku, lżejszy bundle główny |
| Tryb production | mode: 'production' i TerserPlugin | minifikacja JS oraz tree-shaking nieużywanego kodu |
Praktyczne wskazówki
- Zacznij od trybu development — dev server z hot reloadem szybciej pokaże błędne importy i literówki w ścieżkach niż pełny build produkcyjny, który trwa dłużej.
- Sprawdź entry i output — generator zakłada typowy układ src/index oraz katalog dist; jeśli Twój punkt wejścia leży gdzie indziej, popraw pole entry przed pierwszym uruchomieniem.
- Nie dubluj loaderów — przy ts-loader nie dodawaj równocześnie babel-loader z presetem TypeScript dla tych samych plików; wybierz jedną ścieżkę kompilacji.
- Pamiętaj o contenthash w production — bez niego nazwy plików nie zmieniają się po edycji kodu i użytkownicy mogą otrzymywać stare bundle z cache przeglądarki.
- Mierz zamiast zgadywać — włączaj opcje optymalizacji pojedynczo i porównuj rozmiary chunków, żeby wiedzieć, które ustawienie faktycznie coś dało.
Ograniczenia generatora
- Nie zna struktury Twojego projektu — ścieżki entry, output i szablon HTML to wartości domyślne; przy nietypowym układzie katalogów trzeba je poprawić ręcznie.
- Nie weryfikuje wersji pakietów — wygenerowany plik zakłada Webpack 5; w projektach na starszej wersji część składni reguł i nazw pluginów wymaga korekty.
- Pomija nietypowe przypadki — loadery do WebAssembly, workerów, plików shaderów czy własne pluginy trzeba dopisać samodzielnie, bo generator ich nie przewiduje.
- Nie konfiguruje serwera backendowego — proxy, HTTPS i CORS zależą od Twojego API; sekcja devServer wymaga uzupełnienia adresu docelowego i reguł przepisywania ścieżek.