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";
}
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,
},
};
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.