Správa aktiv může být těžkopádným úkolem. Naštěstí nyní máme svazovače, kteří tento úkol zjednoduší. V tomto článku bychom se podívali na Webpack , nejoblíbenější dostupný balíček.
Webový balíček se na první pohled může zdát extrémně skličující, ale tento článek zajistí, že budete mít dostatek znalostí pro konfiguraci Webpacku na vlastní pěst.
Co přesně je Webpack?
Podívejme se, jak to Google definuje:"webpack je open-source modul pro JavaScript. Je vytvořen primárně pro JavaScript, ale dokáže transformovat front-end položky, jako jsou HTML, CSS a obrázky, pokud jsou zahrnuty odpovídající zavaděče. . webpack přebírá moduly se závislostmi a generuje statická aktiva představující tyto moduly."
Možná jste narazili na několik nových výrazů jako "nakladače" v definici. Než budeme pokračovat, podívejme se na několik termínů:
-
nakladače :Nakladače jsou rozšíření třetích stran které pomáhají webpacku zabývat se různými příponami souborů. Existují například zavaděče pro CSS , pro obrázky atd.
Cílem zavaděče je transformovat soubory (jiné než JavaScript ) v modulech. Jakmile se soubor stane modulem, webpack jej může použít jako závislost ve vašem projektu.
-
pluginy :Pluginy jsou rozšíření třetích stran to může změnit způsob webpack funguje. Existují například pluginy pro extrahování HTML , CSS , pro práci s mikrofrontendy.
První aplikace Webpack
Začněme v malém. Inicializujte projekt nového uzlu vytvořením nové složky a pomocí příkazu npm init -y . Nainstalujte webpack související závislosti pomocí npm i -D webpack webpack-cli
POZNÁMKA:Webový balíček závislosti by měly být vždy Dev Dependencies.
Inicializujte následující soubory:
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack Demo</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
// src/index.html
console.log("Hello Webpack!")
Nakonec do package.json přidejte následující skript :
"scripts": {
"build": "webpack --config webpack.config.js"
}
Nyní můžete použít npm run build vygenerovat dist/bundle.js a spusťte public/index.html k využití vytvořeného balíčku.
Přidání zavaděčů
Možná se ptáte „Tolik práce pro TOHLE?“ Nezlob se, příteli, tady je Webpack magie začíná.
Přidejte file-loader do našeho projektu pomocí npm i -D file-loader a aktualizujte webpack.config.js
module.exports = {
// ...
module: {
// defining the rules for additional modules, other than .js files
// you can very well use rules for .js files too, eg: using babel-loader
rules: [
{
// files the rule applies to (using RegEx is a good practice)
test: /\.(png|jpe?g|svg)$/,
// loaders & configuration
use: [
{
loader: 'file-loader',
// if you skip the options, the default options will be used
options: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
},
],
},
};
Nyní můžete importovat soubory obrázků do svých projektů.
// src/index.js
// NOTE: you can use ES Modules import/export statements
import natureImg from './assets/nature.jpg'
const img = document.createElement('img')
img.src = natureImg
document.body.appendChild(img)
Spusťte build skript pro generování souborů. Otevřete public/index.html
Přidávání pluginů
Pojďme nyní optimalizovat, jak zacházíme s HTML takže webpack automaticky přidá soubory skriptu na stránku. Přidejte html-webpack-plugin pomocí příkazu npm i -D html-webpack-plugin .
// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
Odstraňte script tag z public/index.html . Webový balíček vloží skripty. Vygeneruje také dalších index.html soubor v vzdálenosti složku, kterou můžete použít.
Použití Dev Server
Opakované načítání stránky poměrně často je velkou bolestí. K vyřešení tohoto problému máme webpack-dev-server .
Nainstalujte závislost pomocí npm i -D webpack-dev-server .
// webpack.config.js
// ...
module.exports = {
// ...
devServer: {
port: 3000, // default: 8000
},
};
Nakonec musíte přidat další skript:
"start": "webpack serve --config webpack.config.js"
Nyní můžete použít npm start ke spuštění serveru webpack
Sbalení
To je vše, co potřebujete vědět o webpacku ... je to pouze modulový balík, který vám umožňuje nakonfigurovat jej podle vašich požadavků pomocí loaderů a pluginy . Na některé další dostupné pluginy se můžete podívat v následujících článcích:
- Vytvořte aplikaci React od nuly
- Micro-Frontends:The Next Gen Way to build Web Apps
Doufám, že jste překonali svůj strach z používání webpacku a tento článek vám pomůže na vaší cestě rozvoje!
V současné době pracuji na projektu využívajícím zcela vlastní nakonfigurovaný Webpack , klidně se na to podívejte:
Výzkum říká, že si zapište své cíle na tužku a papír dělá vám 21 % na 39 % s větší pravděpodobností jich dosáhne. Podívejte se na tyto sešity a deníky a usnadněte si cestu za dosažením svých snů :https://www.amazon.com/Tapajyoti-Bose/e/B09VGDDHRR
Děkujeme za přečtení
Potřebujete nejlépe hodnoceného nezávislého vývojáře front-end ? Kontaktujte mě na Upwork
Chcete vidět, na čem pracuji? Podívejte se na můj GitHub
Jsem na volné noze, který začíná jako Digitální nomád v polovině roku 2022. Chcete stihnout cestu? Sledujte mě na Instagramu
Sledujte mé blogy pro Týdenní novinky na Dev
Nejčastější dotazy
Toto je několik často kladených otázek, které dostávám. Doufám tedy, že tento FAQ sekce řeší vaše problémy.
-
Jsem začátečník, jak se mám naučit Front-End Web Dev?
Podívejte se do následujících článků:- Plán rozvoje frontend
- Nápady na přední projekt
-
Poradil byste mi?
Omlouvám se, už jsem hodně vytížený a nemám čas někoho mentorovat. -
Chtěli byste na našem webu spolupracovat?
Jak je uvedeno v předchozí otázce , jsem v časové tísni, takže bych takové příležitosti musel předávat dál.
Připojte se ke mně na
- Portfolio
- Upwork
- GitHub