javascript - script - webpack-- config webpack config js

Webpack watch() con múltiples puntos de entrada: ¿emite paquetes para archivos no modificados?

Question

En mi webpack.config.js tengo 3 puntos de entrada separados, uno para el paquete JS , uno para el paquete SCSS principal y otro para un paquete SCSS separado que no tiene relación con el paquete SCSS principal.

Cuando uso la API webpack.watch() , por alguna razón, editar, por ejemplo, los archivos de origen JS, hace que no solo se recompile el paquete JS, sino también los 2 paquetes SCSS.
¿Por qué sucede esto y cómo puedo detener este comportamiento y asegurarme de que solo el punto de entrada que se edita se vuelva a compilar?

La razón por la que esto es un problema es que estoy usando browsersync , y para compilar el paquete CSS simplemente estoy inyectando el CSS en lugar de recargar, pero en HTML / JS edita su recarga. Sin embargo, si edito el SCSS y también compila JS / HTML browsersync activa una recarga en lugar de una inyección de CSS.

Answer 1

En ese caso, necesita un archivo que permita a webpack detectar cuántos cambios se han realizado en cada punto de entrada diferente.

Para eso, puedes usar el archivo de manifiesto proporcionado por commonsChunkPlugin :

Por ejemplo, si tiene los siguientes puntos de entrada:

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

Puedes usar el plugin CommonsChunkPlugin:

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

Esta configuración genera un archivo de manifiesto como otra salida. En ese caso, si realiza un cambio en el punto de entrada de su ''aplicación '', webpack solo recompilará el paquete de salida main.js (de acuerdo con el formato ''nombre de archivo'' en la configuración de ''salida'' ) porque el paquete del proveedor ya es el mismo.

Puedes intentarlo con tus puntos de entrada específicos.