Konfigurace pro vývoj
V minulé části jsme dokončili naši konfiguraci pro sestavení aplikace pro produkci. Pokud bychom teď ale na naší aplikaci chtěli dále pracovat, tak to pro nás nebude vůbec komfortní. Museli bychom po každé změně psát příkaz "npm run build" a čekat až se aplikace sestaví. Proto si v této části vytvoříme konfiguraci, kterou budeme používat pro vývoj.
Pokud z nějakého důvodu nemáte kód z minulé části, tak si můžete stáhnout startovní kód pro tuto část. Po stažení nezapomeňte nainstalovat balíčky pomocí příkazu "npm install".
Rozdělení konfigurace do dvou souborů
Mohli bychom si sice pro vývoj vytvořit konfigurační soubor úplně od začátku, ale můžeme využít toho, že některé věci budou společné pro produkci i pro vývoj. Proto si naši aktuální konfiguraci rozdělíme na dva soubory tak, aby nastavení, která budou použita i pro vývoj, byla v samostatném souboru.
Nejprve si vytvoříme soubor webpack.common.js, do kterého ze souboru webpack.config.js přesuneme části konfigurace, které jsou společné i pro vývoj.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
entry: "./index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
clean: true
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
}),
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "assets/img/*").replace(/\\/g, "/"),
to: path.resolve(__dirname, "dist")
}
]
})
]
}Protože budeme mít kromě konfiguračního souboru webpack.config.js i další konfigurační soubor pro vývoj, tak by jeho název nemusel dostatečně popisovat, že se jedná o konfiguraci pro produkci. Přejmenujeme jej tedy na webpack.prod.js, aby bylo jasné, že se jedná o konfiguraci pro produkci. Poté co jsme část konfigurace přesunuli do souboru webpack.common.js, by měl obsahovat následující kód:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["postcss-preset-env", {}]
]
}
}
}
]
},
{
test: /\.less$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["postcss-preset-env", {}]
]
}
}
},
"less-loader"
]
}
]
},
optimization: {
minimizer: [
`...`,
new CssMinimizerPlugin()
]
},
plugins: [
new MiniCssExtractPlugin()
]
}Teď budeme naši konfiguraci v souboru webpack.prod.js muset sloučit s konfigurací v souboru webpack.common.js. K tomu použijeme balíček webpack-merge. Nainstalujeme jej pomocí následujícího příkazu:
npm install --save-dev webpack-mergeAž se nám balíček nainstaluje, tak jej můžeme použít. Použijeme jej v souboru webpack.prod.js. Balíček webpack-merge nám poskytuje funkci merge, které můžeme předat více konfiguračních objektů pro jejich sloučení dohromady. Následující ukázka to ukazuje. Protože soubor webpack.common.js exportuje konfigurační soubor, tak si jej do souboru můžeme naimportovat a použít.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common");
module.exports = merge(commonConfig, {
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["postcss-preset-env", {}]
]
}
}
}
]
},
{
test: /\.less$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
["postcss-preset-env", {}]
]
}
}
},
"less-loader"
]
}
]
},
optimization: {
minimizer: [
`...`,
new CssMinimizerPlugin()
]
},
plugins: [
new MiniCssExtractPlugin()
]
});Pokud si aplikaci zkusíte sestavit, vše by mělo fungovat jako předtím. Akorát jsme tedy změnili název konfigurační souboru na webpack.prod.js, takže to musíme změnit i ve skriptu v package.json.
"build": "webpack --config webpack.prod.js --mode production"Konfigurační soubor pro vývoj
Části konfigurace, které jsou společné pro vývoj i produkci jsme přesunuli do samostatného souboru. Můžeme tedy vytvořit konfigurační soubor pro vývoj. Můžeme jej nazvat třeba jako webpack.dev.js. Zatím bude obsahovat jen loadery pro CSS a LESS soubory, ale narozdíl od konfiguraci pro produkci se budou styly kompilovat do JavaScriptu aby to bylo rychlejší.
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common");
module.exports = merge(commonConfig, {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"]
}
]
}
});K sestavení aplikace pro vývoj si musíme v package.json vytvořit nový skript. Budeme Webpack spouštět s konfiguračním souborem webpack.dev.js v módu pro vývoj. Tento skript můžeme nazvat třeba jako "dev".
"dev": "webpack --config webpack.dev.js --mode development"Pokud skript spustíme příkazem "npm run dev", tak by se nám aplikace měla sestavit.
Dev Server
I když sestavení pro vývoj trvá kratší dobu, tak není moc komfortní po každé změně psát "npm run dev" aby se nám aplikace sestavila. Proto si můžeme nainstalovat Dev Server, který se o to postará za nás. Nainstalujeme jej tímto příkazem:
npm install --save-dev webpack-dev-serverPo instalaci si můžeme Dev Server nakonfigurovat v konfiguračním souboru pro vývoj prostřednictvím vlastnosti devServer. Nastavíme kterou složku chceme servírovat a na jakém portu.
const { merge } = require("webpack-merge");
const commonConfig = require("./webpack.common");
module.exports = merge(commonConfig, {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
},
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"]
}
]
},
devServer: {
static: "./dist",
port: "3000"
}
});Aby se nám Dev Server při spuštění Webpacku spustil, tak musíme upravit náš skript v package.json. Za webpack dopíšeme text "serve" a na konec můžeme přidat možnost --open, což zajistí, že se nám naše aplikace automaticky otevře v prohlížeči.
"dev": "webpack serve --config webpack.dev.js --mode development --open"Teď můžeme Webpack s naší konfigurací pro vývoj spustit a v prohlížeči by se nám naše aplikace měla automaticky otevřít. Pokud by se z nějakého důvodu neotevřela, tak bude k dispozici na této adrese: http://localhost:3000/. Pokud teď v našem kódu provedeme nějakou změnu, tak se nám aplikace automaticky sestaví aniž bychom museli znovu psát příkaz "npm run dev". Další výhoda je ta, že pokud provedeme změny v našem CSS nebo JavaScript kódu, tak se aplikace v prohlížeči automaticky aktualizuje bez toho, aniž bychom museli manuálně obnovovat stránku. Klidně si zkuste třeba v CSS kódu změnit nějakou barvu, aplikace se automaticky aktualizuje.
Závěr
V tomto tutoriálu jste si zkusili s Webpackem pracovat a přidat jej do již existující aplikace, kterou jsem pro tento tutoriál vytvořil. Nyní byste měli být připraveni Webpack používat ve svých vlastních projektech. Možná vám může připadat, že i po dokončení tohoto tutoriálu toho o Webpacku moc nevíte a necítíte se na to jej používat. To je v pořádku, myslím že to tak má spoustu lidí. Webpack není něco co byste měli umět nazpaměť, je to hlavně o tom umět si vygooglovat nebo si najít v dokumentaci, jak něco nakonfigurovat. Ze začátku pro vás práce s Webpackem možná nebude nic jednoduchého, ale až si jej trochu osaháte, tak se to zlepší. Na konec vám přeji, abyste si při konfiguraci Webpacku nerozbili klávesnici nebo myš až jej budete používat ve vlastních projektech.