Watch Webpack() z wieloma punktami wejścia - emitowanie pakietów dla niezmienionych plików?

Question

W moim pliku webpack.config.js mam 3 oddzielne punkty wejściowe, jeden dla pakietu JS, jeden dla głównego pakietu SCSS i jeden dla osobnego pakietu SCSS, który nie ma związku z głównym pakietem SCSS.

Kiedy używam funkcji webpack.watch(), z jakiegoś powodu edytowanie, powiedzmy, plików źródłowych JS, powoduje nie tylko rekompilację pakietu JS, ale także 2 pakiety SCSS. Dlaczego tak jest i jak mogę zatrzymać to zachowanie i upewnić się, że rekompilowany jest tylko punkt wejścia, który jest edytowany?

Powodem tego jest problem z używaniem browsersync, a dla rekompilacji pakietów CSS, to po prostu wstrzykiwanie CSS zamiast przeładowywania, ale w HTML/JS edytuje jego przeładowanie. Jednak jeśli edytuję SCSS, a także przekompiluje JS/HTMLsynchronizator, ładuje ponownie zamiast iniekcji CSS.

Answer 1

W takim przypadku potrzebny jest plik, który pozwoli pakietowi internetowemu wykryć, ile zmian należy wykonać w każdym innym punkcie wejścia.

W tym celu można skorzystać z oczywistego plik dostarczone przez commonsChunkPlugin:

Na przykład, jeśli masz następujące punkty wejścia:

entry: { 
    app: 'main.js', // main entry point 
    vendor: ['jquery', 'react'] //Third libraries 
} 

Można użyć wtyczka CommonsChunkPlugin:

new wepack.optimize.CommonsChunkPlugin({ 
    name: ['vendor', 'manifest'] 
}) 

Ta konfiguracja generuje plik manifestu jako inne wyjście. W takim przypadku, jeśli wprowadzisz zmianę w swoim wpisie o nazwie "", pakiet będzie przekompilował tylko pakiet wyjściowy main.js (zgodnie z "filename" w konfiguracji "output"), ponieważ pakiet dostawców jest już taki sam.

Możesz spróbować, korzystając ze swoich konkretnych punktów wejścia.