Mit ExtractTextPlugin für Webpack, wie extrahieren Sie nicht CSS und erstellen Sie eine leere Datei mit einem Flag?

Question

Grundsätzlich möchte ich css in der Produktion extrahieren, aber ich möchte es in der JavaScript-Datei im Entwicklungsmodus lassen.

Dies ist so kann ich die Quellkarte arbeiten, die die verwendeten Sass-Dateien zeigt.

Ich möchte in der Lage sein:

<link href="~/dist/css/site.css" rel="stylesheet" /> 
<script type="text/javascript" src="~/dist/js/manifest.js"></script> 
<script type="text/javascript" src="~/dist/js/css.js"></script> 

Dokumentation ist ein wenig auf dem Boden dünn.

Also im Dev-Modus site.css wird leer sein und wird keinen Fehler verursachen, wie es wäre, wenn es nicht existierte. css.js wird für Style und Source Mapping verwendet.

Im Produktionsmodus wird css.js existieren aber nichts tun, weil die CSS extrahiert wird. Dies bedeutet, dass die CSS-Datei schnell und einfach geladen wird und in site.css minimiert wird, aber keine Zuordnung hat.

Answer 1

Was ich tat, war das: Installiert und benötigt webpack-create-file-plugin Erstellt das css-Verzeichnis mit einer .empty-Datei darin, weil das Verzeichnis vorhanden sein muss.

Dies ist im Allgemeinen, wie ich es getan haben:

sieht

const extractSass = new ExtractTextPlugin("css/site.css"); 
const sassOptions = removeEmpty([ 
    ifNotProd({ 
     loader: "style-loader" 
    }), 
    { 
     loader: "css-loader", 
     options: { 
      sourceMap: ifNotProd() 
     } 
    }, { 
     loader: "sass-loader", 
     options: { 
      outputStyle: ifProd("compressed", "expanded"), 
      sourceMap: ifNotProd() 
     } 
    } 
]); 

Die sass Regel dies wie:

{ 
    test: /\.scss$/, 
    use: ifProd(extractSass.extract({ 
     use: sassOptions, 
     fallback: "style-loader" 
    }), sassOptions) 
} 

Hinzu Plugins ifNotProd(new CreateFilePlugin({files: ["css/site.css"]})) und ifProd(extractSass)