Próbuję zrobić coś, co moim zdaniem powinno być możliwe, ale naprawdę nie mogę zrozumieć, jak to zrobić, tylko z dokumentacji pakietu internetowego.
Piszę bibliotekę JavaScript z kilkoma modułami, które mogą lub nie zależą od siebie. Ponadto jQuery jest używane przez wszystkie moduły, a niektóre z nich mogą wymagać wtyczek jQuery. Ta biblioteka będzie następnie używana na kilku różnych stronach internetowych, które mogą wymagać niektórych lub wszystkich modułów.
Definiowanie zależności między moimi modułami było bardzo łatwe, ale zdefiniowanie ich zależności od firm trzecich wydaje się być trudniejsze niż się spodziewałem.
Co chciałbym osiągnąć : dla każdej aplikacji chcę mieć dwa pliki pakietów, jeden z niezbędnymi zależnościami innych firm, a drugi z niezbędnymi modułami z mojej biblioteki.
Przykład : Wyobraźmy sobie, że moja biblioteka ma następujące moduły:
- a (wymaga: jquery, jquery.plugin1)
- b (wymaga: jquery, a)
- c (wymaga: jquery, jquery.ui, a, b)
- d (wymaga: jquery, jquery.plugin2, a)
Mam aplikację (zobacz ją jako unikalny plik wejściowy), która wymaga modułów a, bi c. Webpack dla tego przypadku powinien generować następujące pliki:
- pakiet dostawcy : z jquery, jquery.plugin1 i jquery.ui;
- pakiet strony internetowej : z modułami a, bi c;
Ostatecznie wolałbym mieć jQuery jako globalny, więc nie muszę wymagać tego na każdym pojedynczym pliku (mógłbym wymagać, na przykład, tylko w pliku głównym). A wtyczki jQuery po prostu rozszerzałyby $ global na wypadek, gdyby były wymagane (nie stanowi problemu, jeśli są dostępne dla innych modułów, które ich nie potrzebują).
Zakładając, że jest to możliwe, jaki byłby przykład pliku konfiguracyjnego pakietu WebPack dla tego przypadku? Wypróbowałem kilka kombinacji programów ładujących, zewnętrznych i wtyczek w moim pliku konfiguracyjnym, ale tak naprawdę nie rozumiem, co robią i których powinienem użyć. Dziękuję Ci!
źródło
Odpowiedzi:
w moim pliku webpack.config.js (wersja 1,2,3) mam
w mojej tablicy wtyczek
Teraz mam plik, który dodaje tylko biblioteki innych firm do jednego pliku, zgodnie z wymaganiami.
Jeśli chcesz uzyskać bardziej szczegółowe informacje, w których oddzielisz dostawców i pliki punktów wejścia:
Zwróć uwagę, że kolejność wtyczek ma duże znaczenie.
Również to się zmieni w wersji 4. Kiedy to oficjalne, aktualizuję tę odpowiedź.
Aktualizacja: zmiana indeksu wyszukiwania dla użytkowników systemu Windows
źródło
isExternal
wminChunks
mój dzień. Jak to nie jest udokumentowane? Są wady?options.minChunks (number|Infinity|function(module, count) -> boolean):
nie widzę jeszcze wady.module.userRequest
(i ładowarka prawdopodobnie jestnode_modules
). Mój kod dlaisExternal()
:return typeof module.userRequest === 'string' && !!module.userRequest.split('!').pop().match(/(node_modules|bower_components|libraries)/);
Nie jestem pewien, czy w pełni rozumiem Twój problem, ale ponieważ ostatnio miałem podobny problem, postaram się Ci pomóc.
Pakiet dostawcy.
W tym celu należy użyć CommonsChunkPlugin . w konfiguracji określasz nazwę porcji (np.
vendor
) i nazwę pliku, który zostanie wygenerowany (vendor.js
).Teraz ważna część, musisz teraz określić, co to znaczy
vendor
biblioteka i zrobić to w sekcji wpisu. Jeszcze jedna pozycja na liście wpisów o tej samej nazwie, co nazwa nowo zadeklarowanej porcji (tj. W tym przypadku „sprzedawca”). Wartością tego wpisu powinna być lista wszystkich modułów, które chcesz przenieść dovendor
paczki. w twoim przypadku powinno to wyglądać mniej więcej tak:JQuery jako globalny
Miałem ten sam problem i rozwiązałem go za pomocą ProvidePlugin . tutaj nie definiujesz obiektu globalnego, ale rodzaj skrótów do modułów. czyli możesz to skonfigurować w ten sposób:
Teraz możesz po prostu użyć
$
dowolnego miejsca w kodzie - webpack automatycznie przekonwertuje to naMam nadzieję, że to pomogło. możesz również spojrzeć na mój plik konfiguracyjny pakietu internetowego, który jest tutaj
Uwielbiam webpack, ale zgadzam się, że dokumentacja nie należy do najładniejszych na świecie… ale hej… na początku ludzie mówili to samo o dokumentacji Angulara :)
Edytować:
Aby mieć fragmenty dostawcy specyficzne dla punktu wejścia, po prostu użyj CommonsChunkPlugins wiele razy:
a następnie zadeklaruj różne biblioteki zewnętrzne dla różnych plików:
Jeśli niektóre biblioteki nakładają się (i dla większości z nich) między punktami wejścia, możesz wyodrębnić je do wspólnego pliku za pomocą tej samej wtyczki, tylko z inną konfiguracją. Zobacz ten przykład.
źródło
W przypadku, gdy interesuje Cię automatyczne grupowanie skryptów oddzielnie od skryptów dostawców:
Możesz przeczytać więcej o tej funkcji w oficjalnej dokumentacji .
źródło
vendor : Object.keys(pkg.dependencies)
nie zawsze działa i jest zależne od sposobu budowy pakietu.package.json
ustawione. To obejście działa w większości przypadków, ale są wyjątki, w których musisz wybrać inną ścieżkę. Może być interesujące opublikowanie własnej odpowiedzi na pytanie, aby pomóc społeczności.Object.keys(pkg.dependencies)
spakowanie wszystkiego !!!! powiedzmy, że masz tam wymienioną grupę ładujących ... tak, to zostanie uwzględnione !!! więc uważaj ... rozdziel ostrożnie, co to jest devDependency i co to jest zależnośćdependencies
?Nie jestem też pewien, czy w pełni rozumiem Twój przypadek, ale oto fragment kodu konfiguracyjnego umożliwiający utworzenie oddzielnych fragmentów dostawców dla każdego z Twoich pakietów:
I link do
CommonsChunkPlugin
dokumentów: http://webpack.github.io/docs/list-of-plugins.html#commonschunkpluginźródło
react
powinien być obecny w pakiecie dostawcy tylko wtedy, gdy jest to wyraźnie wymagane przez bundle1 i bundl2. Nie powinienem musieć tego określać w pliku konfiguracyjnym ... Czy to ma sens? Jakieś pomysły?