Webpack watch (), avec de multiples points d'entrée émettant des faisceaux pour les non-fichiers modifiés?

Question

Dans mon webpack.config.js j'ai 3 points d'entrée distincte, l'un pour le JS bundle, un pour le principal SCSS bundle, et l'autre pour séparer SCSS bundle qui n'a aucune relation avec les principaux SCSS bundle.

Lorsque j'utilise l' webpack.watch() API, pour quelque raison, l'édition, la dire, la JS fichiers source, cause non seulement la JS faisceau d'être recompilé, mais aussi les 2 SCSS faisceaux.
Pourquoi est-ce, et comment puis-je arrêter ce comportement et de s'assurer que seul le point d'entrée qui est édité est recompilé?

La raison de ce qui est un problème c'est que je suis en utilisant browsersync, et pour le CSS bundle recompile je suis juste l'injection de la CSS au lieu de recharger, mais sur le langage HTML/JS édite son rechargement. Cependant si j'ai modifier le SCSS et il a également recompile le JS/HTML browsersync déclenche une recharge au lieu d'un CSS injecter.

Answer 1

Dans ce cas, vous avez besoin d'un fichier qui permettent webpack détecter la façon dont de nombreux changements ont faire sur chaque point d'entrée.

Pour cela, vous pouvez utiliser le manifeste de fichier fourni par commonsChunkPlugin:

Par exemple, si vous avez les points d'entrée suivants:

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

Vous pouvez utiliser le plugin CommonsChunkPlugin:

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

Cette configuration génère un fichier de manifeste comme une autre sortie. Dans ce cas, si vous faites un changement dans votre 'app' point d'entrée, webpack sont seulement en cours de recompiler le main.js la sortie du bundle (selon le nom de fichier de format dans la "production" de la configuration) parce que le vendeur bundle est déjà le même.

Vous pouvez essayer avec vos points d'entrée.