Evitare la duplicazione dell'output tramite webpack, less-loader ed estra-text-webpack-plugin

Question

Uso il webpack per raggruppare i miei file, incluso css (meno).

Funziona perfettamente con i file css, ma non appena aggiungo less-loader nel gioco, nell'output vengono duplicati meno file richiesti da altri file meno (comuni).

Quello che penso che faccio:

 |-------entry.js-------| 
    |      | 

componentOne.js           componentTwo.js
            |                                             |
      one.less                               two.less
            \                                          /
              \ ----- common.less ----/

Cosa webpack pensa che faccio:

 |-------entry.js-------| 
    |      | 

componentOne.js           componenteDue.js
            |                                             |
      one.less                               two.less
            |                                             |
common.less                         common.less

Questo risultato in common.less essere ripetuto nella mia uscita tutte le volte che è necessario. Anche in questo caso, senza less-loader, common.css viene riconosciuto come lo stesso modulo quando richiesto la seconda volta.

Here's a repo illustrating this

EDIT: Dopo alcune indagini, sembra che importati meno file da altri file meno sono inclusi per il meno compilatore e non il webpack richiedono sistema. I duplicati avrebbero quindi senso.

EDIT2: un modo per evitare questo è di avere i file common.less che non emettono nulla. presenta ancora alcune limitazioni, per esempio:

.@{a}() { 
 
    // rules... 
 
}

Answer 1

La sintassi @import supporta la possibilità di includere il file Less senza generare alcun output tramite la parola chiave reference.

@import (reference) 'common.less'; 

io uso qualcosa di simile a quanto sopra per riutilizzare variabili e mixins da Bootstrap, anche se sono import ed o require 'D più volte da diversi file JavaScript.La documentazione Less Import Options descrive i limiti di questa funzionalità e di altre opzioni in modo più dettagliato.

Answer 2

Sarebbe preferibile spostare il common.less in un modulo comune utilizzando il CommonsChunkPlugin. In questo modo può essere suddiviso in pacchetti web.