webpack jest modułem bundler. Jego głównym celem jest wiązanie plików JavaScript do użycia w przeglądarce, ale jest również zdolny do przekształcania, wiązania lub pakowania prawie każdego zasobu lub zasobu.
- Spis treści
- Install
- Wprowadzenie
- Get Started
- Browser Compatibility
- Koncepcje
- Wtyczki
- Loadery
- Files
- JSON
- Transpilowanie
- Templating
- Styling
- Frameworks
- Wydajność
- Formaty modułów
- Dzielenie kodu
- Optymalizacje
- Współtworzenie
- Tworzenie własnych wtyczek i loaderów
- Wsparcie
- Licencja
- Zespół Core
- Sponsorowanie
- Partnerzy Premium
- Inni wspierający i sponsorzy
- Złotych sponsorów
- Srebrni Sponsorzy
- Brązowi Sponsorzy
- Wspierający
- Specjalne podziękowania dla
Spis treści
- Instalacja
- Wprowadzenie
- Koncepcje
- Wsparcie
- Zespół Core
- Sponsoring
- Premium Partners
- Other Backers and Sponsors
- Gold Sponsors
- Silver Sponsors
- Bronze Sponsors
- Backers
- Special Thanks
Install
Install with npm:
npm install --save-dev webpack
Install with yarn:
yarn add webpack --dev
Wprowadzenie
webpack jest bundlerem dla modułów. Jego głównym celem jest wiązanie plików JavaScript do użycia w przeglądarce, ale jest również zdolny do przekształcania, wiązania lub pakowania prawie każdego zasobu lub zasobu.
TL;DR
- Bundle ES Modules, CommonJS i moduły AMD (nawet połączone).
- Można utworzyć pojedynczy pakiet lub wiele kawałków, które są asynchronicznie ładowane w czasie wykonywania (aby zmniejszyć początkowy czas ładowania).
- Zależności są rozwiązywane podczas kompilacji, zmniejszając rozmiar runtime.
- Ładowarki mogą wstępnie przetwarzać pliki podczas kompilacji, np. TypeScript na JavaScript, łańcuchy Handlebars na skompilowane funkcje, obrazy na Base64, itp.
- Wysoko modułowy system wtyczek, aby zrobić cokolwiek innego, czego wymaga twoja aplikacja.
Get Started
Check out webpack’s quick Get Started guide and the other guides.
Browser Compatibility
webpack supports all browsers that are ES5-compliant (IE8 and below are not supported).webpack also needs Promise for import() and require.ensure(). Jeśli chcesz obsługiwać starsze przeglądarki, będziesz musiał załadować polyfill przed użyciem tych wyrażeń.
Koncepcje
Wtyczki
webpack ma bogaty interfejs wtyczek. Większość funkcji w samym webpacku używa tego interfejsu wtyczek. To czyni webpack bardzo elastycznym.
| Nazwa | Status | Rozmiar instalacji | Opis |
|---|---|---|---|
| mini-css-extract-plugin | Extraktuje CSS do osobnych plików. Tworzy plik CSS na każdy plik JS, który zawiera CSS. | ||
| compression-webpack-plugin | Przygotowuje skompresowane wersje aktywów, aby służyć im z Content-Encoding | ||
| html-webpack-plugin | Upraszcza tworzenie plików HTML (index.html) do serwowania twoich bundli |
Loadery
webpack umożliwia użycie loaderów do wstępnego przetwarzania plików. To pozwala na bundleany statycznych zasobów sposób poza JavaScript. Możesz łatwo napisać własne loadery używając Node.js.
Loadery są aktywowane przez użycie loadername! prefiksów w require() stwierdzeniach, lub są automatycznie stosowane przez regex z twojej konfiguracji webpacka.
Files
| Name | Status | Install Size | Description |
|---|---|---|---|
| raw-loader | Wczytuje surową zawartość pliku (utf-8) | ||
| val-loader | Wykonuje kod jako moduł i uważa eksport za kod JS | ||
| url-loader | Działa jak loader plików, ale może zwrócić Data Url, jeśli plik jest mniejszy niż limit | ||
| file-loader | Emituje plik do folderu wyjściowego i zwraca (względny) adres url |
JSON
| Nazwa | Status | Rozmiar instalacji | Opis |
|---|---|---|---|
| Ładowanie i transpilowanie pliku CSON |
Transpilowanie
| Nazwa | Status | Rozmiar instalacji | Opis |
|---|---|---|---|
| Ładuje kod ES2015+ i transponuje do ES5 używając Babel | |||
| Wczytuje kod ES2015+ i transponuje go do ES5 przy użyciu Traceur | |||
| Ładuje TypeScript jak JavaScript | |||
| Ładuje CoffeeScript jak JavaScript |
Templating
| Name | Status | Rozmiar instalacji | Opis |
|---|---|---|---|
| Eksportuje HTML jako ciąg znaków, wymaga odwołań do zasobów statycznych | |||
| Załaduj szablony Pug i zwróć funkcję | |||
| Kompiluje Markdown do HTML | |||
| Wczytuje i przekształca plik HTML używając PostHTML | |||
| Kompiluje Handlebars do HTML |
Styling
| Name | Status | Rozmiar instalacji | Opis |
|---|---|---|---|
<style> |
Dodaj eksporty modułu jako style do DOM | ||
| Wczytuje plik CSS z rozwiązanym importem i zwraca kod CSS | |||
| Załaduje i skompiluje plik LESS | |||
| Załaduje i skompiluje plik Sass/SCSS | |||
| Wczytuje i kompiluje plik Stylusa | |||
| Wczytuje i przekształca plik CSS/SSS przy użyciu PostCSS |
Frameworks
| Name | Status | Rozmiar instalacji | Opis |
|---|---|---|---|
| vue-size | Przetwarzaj HTML & CSS za pomocą wybranego preprocesora i require()składników Web jak moduły pierwszej klasy |
||
| Ładuje i kompiluje komponenty Angular 2 | |||
| Riot official webpack loader |
Wydajność
webpack używa async I/O i ma wiele poziomów buforowania. To sprawia, że webpack jest szybki i niewiarygodnie szybki w kompilacjach przyrostowych.
Formaty modułów
webpack obsługuje moduły ES2015+, CommonJS i AMD po wyjęciu z pudełka. Wykonuje sprytną analizę statystyczną na AST twojego kodu. Posiada nawet silnik ewaluacyjny do oceny prostych wyrażeń. Pozwala to na obsługę większości istniejących bibliotek po wyjęciu z pudełka.
Dzielenie kodu
webpack pozwala na podzielenie twojej bazy kodowej na wiele kawałków. Kawałki są ładowane asynchronicznie w czasie uruchamiania. To zmniejsza początkowy czas ładowania.
Optymalizacje
webpack może wykonać wiele optymalizacji, aby zmniejszyć rozmiar wyjściowy twojego JavaScriptu poprzez deduplikację często używanych modułów, minifikację i dając ci pełną kontrolę nad tym, co jest ładowane początkowo i co jest ładowane w czasie runtime poprzez podział kodu. Może również sprawić, że twoje fragmenty kodu będą przyjazne dla pamięci podręcznej dzięki użyciu haszy.
Współtworzenie
Chcemy, aby współtworzenie webpacka było zabawne, przyjemne i edukacyjne dla każdego i wszystkich. Mamy żywy ekosystem, który wykracza poza to pojedyncze repo. Zapraszamy do sprawdzenia któregokolwiek z repozytoriów w naszej organizacji lub organizacji webpack-contrib, w której znajdują się wszystkie nasze loadery i pluginy.
Wkład wykracza daleko poza pull requesty i commity. Chociaż uwielbiamy dawać ci możliwość odciśnięcia swojego piętna na webpacku, jesteśmy również zachwyceni, gdy otrzymujemy różne inne wkłady, w tym:
- Aktualizacje dokumentacji, ulepszenia, projekty lub poprawki błędów
- Poprawki ortograficzne lub gramatyczne
- README.md poprawki lub przeprojektowania
- Dodawanie testów jednostkowych lub funkcjonalnych
- Przeglądanie problemów na GitHubie — szczególnie określanie, czy problem nadal istnieje lub jest możliwy do odtworzenia.
- Szukanie #webpack na twitterze i pomaganie komuś, kto potrzebuje pomocy
- Uczenie innych, jak przyczynić się do jednego z wielu repozytoriów webpacka!
- Blogowanie, mówienie o, lub tworzenie tutoriali na temat jednej z wielu funkcji webpacka.
- Pomaganie innym na naszym kanale gitter webpacka.
Aby zacząć, spójrz na naszą dokumentację na temat wnoszenia wkładu.
Jeśli masz obawy lub nie wiesz, od czego zacząć, zawsze możesz skontaktować się z Seanem Larkinem (@TheLarkInn) na Twitterze lub po prostu zgłosić problem, a opiekun będzie mógł udzielić ci wskazówek!
Zaczęliśmy również serię na naszym Medium Publication o nazwie The Contributor’s Guide to webpack. Zachęcamy do przeczytania go i przesłania pytań lub odpowiedzi, jeśli nadal potrzebujesz pomocy.
Chcesz porozmawiać o webpacku? Chętnie zapoznamy się z Twoim abstraktem wykładu/CFP! Możesz wysłać go na adres webpack opencollective com, a my możemy dać wskazówki lub porady!!!
Tworzenie własnych wtyczek i loaderów
Jeśli stworzysz loader lub plugin, chcielibyśmy <3 abyś otworzył źródło i umieścił je na npm. Podążamy za konwencją nazewnictwa x-loader, x-webpack-plugin.
Wsparcie
Uważamy webpack za narzędzie niskiego poziomu, używane nie tylko indywidualnie, ale także warstwowo pod innymi wspaniałymi narzędziami. Ze względu na swoją elastyczność, webpack nie zawsze jest najłatwiejszym rozwiązaniem dla początkujących, ale wierzymy, że jest najpotężniejszy. Zawsze szukamy sposobów, aby ulepszyć i uprościć to narzędzie bez utraty funkcjonalności. Jeśli masz jakieś pomysły, jak to osiągnąć, jesteśmy do dyspozycji!
Jeśli dopiero zaczynasz, spójrz na naszą nową stronę z dokumentami i koncepcjami. Zawiera ona przegląd wysokiego poziomu, który jest świetny dla początkujących!!!
Szukasz dokumentów dotyczących webpacka 1? Proszę sprawdzić starą wiki, ale proszę zauważyć, że ta przestarzała wersja nie jest już wspierana.
Jeśli chcesz coś przedyskutować lub po prostu potrzebujesz pomocy, tutaj jest nasz pokój Gitter, gdzie zawsze są osoby szukające pomocy!
Jeśli nadal masz trudności, chcielibyśmy, abyś opublikował pytanie na StackOverflow z tagiem webpack. O wiele łatwiej jest odpowiedzieć na pytania, które zawierają twój webpack.config.js i odpowiednie pliki! Więc jeśli możesz je dostarczyć, będziemy niezmiernie wdzięczni (i bardziej prawdopodobne, że pomożemy ci znaleźć odpowiedź!)
Jeśli jesteś twitter savvy możesz tweetnąć #webpack z twoim pytaniem i ktoś powinien być w stanie dotrzeć i pomóc również.
Jeśli odkryłeś 🐜 lub masz sugestię funkcji, nie krępuj się utworzyć problem na Githubie.
Licencja
Zespół Core
 Tobias Koppers Core Założyciel m.in. of webpack |
 Johannes Ewald Loaders & Plugins Early adopter of webpack |
 Sean T. Larkin Public Relations Założyciel zespołu core |
 Kees Kluskens Development . Sponsor |
Sponsorowanie
Większość członków zespołu głównego, współtwórców webpacka i współpracowników w ekosystemie wykonuje tę pracę open source w swoim wolnym czasie. Jeśli używasz webpacka do poważnych zadań i chciałbyś, abyśmy poświęcili mu więcej czasu, prosimy o darowiznę. Ten projekt zwiększa również Twoje dochody/produktywność. Sprawia, że rozwój i aplikacje są szybsze i zmniejsza wymaganą przepustowość.
Tak właśnie wykorzystujemy darowizny:
- Pozwalają zespołowi rdzenia pracować nad webpackiem
- Dziękują współtwórcom, jeśli zainwestowali dużo czasu we współtworzenie
- Wspierają projekty w ekosystemie, które mają dużą wartość dla użytkowników
- Wspierają projekty, które są najczęściej wybierane (prace w toku)
- Koszty infrastruktury
- Opłaty za obsługę pieniędzy
Partnerzy Premium
Inni wspierający i sponsorzy
Zanim zaczęliśmy używać OpenCollective, darowizny były przekazywane anonimowo. Teraz, gdy dokonaliśmy zmiany, chcielibyśmy podziękować tym sponsorom (oraz tym, którzy nadal wpłacają datki za pomocą OpenCollective). Jeśli kogoś pominęliśmy, wyślij nam PR, a my dodamy Cię do tej listy.
Złotych sponsorów
Zostań złotym sponsorem i otrzymaj swoje logo w naszym README na Githubie z linkiem do Twojej strony.
Srebrni Sponsorzy
Zostań srebrnym sponsorem i zdobądź swoje logo w naszym README na Githubie z linkiem do Twojej strony.
Brązowi Sponsorzy
Zostań brązowym sponsorem i zdobądź swoje logo w naszym README na Githubie z linkiem do swojej witryny.
Wspierający
Zostań wspierającym i uzyskaj swój wizerunek w naszym README na Githubie z linkiem do swojej strony.
Specjalne podziękowania dla
(W kolejności chronologicznej)
- @google za Google Web Toolkit (GWT), który ma na celu kompilację Javy do JavaScript. Posiada on podobny Code Splitting jak webpack.
- @medikoo dla modules-webmake, który jest podobnym projektem. webpack powstał ponieważ chciałem Code Splitting dla modules-webmake. Co ciekawe, kwestia Code Splitting jest wciąż otwarta (dzięki również @Phoscur za dyskusję).
- @substack dla browserify, który jest podobnym projektem i źródłem wielu pomysłów.
- @jrburke dla require.js, który jest podobnym projektem i źródłem wielu pomysłów.
- @defunctzombie za specyfikację browser-field, która udostępnia moduły dla node.js, browserify i webpack.
- Każdy wczesny użytkownik webpacka, który przyczynił się do rozwoju webpacka poprzez pisanie problemów lub PR. Mieliście wpływ na kierunek…
- @shama, @jhnns i @sokra za utrzymywanie tego projektu
- Każdy kto napisał program ładujący dla webpacka. Jesteście ekosystemem…
- Każdy, kogo zapomniałem tu wymienić, ale również wpłynął na webpack.