Ich verwende Webpack, um meine Reaktionskomponenten zu erstellen, und ich versuche, extract-text-webpack-plugin
mein CSS von meiner generierten JS-Datei zu trennen. Wenn ich jedoch versuche, die Komponente zu erstellen, wird der folgende Fehler angezeigt:
Module build failed: ReferenceError: window is not defined
.
Meine Datei webpack.config.js sieht folgendermaßen aus:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
MainComponent: './src/main.js'
},
output: {
libraryTarget: 'var',
library: 'MainComponent',
path: './build',
filename: '[name].js'
},
module: {
loaders: [{
test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader!css-loader')
}]
},
plugins: [
new ExtractTextPlugin('styles.css')
]
}
ExtractTextPlugin.extract('style-loader!css-loader')
Sie schreiben müssenExtractTextPlugin.extract('style-loader', 'css-loader')
Antworten:
Möglicherweise möchten Sie
style-loader
alsbefore
Argument in derextract
Funktion verwenden.Hier ist die native Implementierung:
Grundsätzlich müssen Sie also Folgendes tun:
wenn Sie zum Beispiel verwenden
sass
.quelle
Ich habe keine Erklärung für die Ursache gesehen, daher habe ich diese Antwort hier veröffentlicht.
Von https://github.com/webpack/extract-text-webpack-plugin#api
Die
#extract
Methode sollte einen Loader erhalten, der ausgibtcss
. Was passierte war , dass es war ein Empfang ,style-loader
die Ausgänge JavaScript - Code , der in eine Webseite eingespritzt werden soll. Dieser Code würde versuchen, darauf zuzugreifenwindow
.Sie sollten keine Loader-Zeichenfolge mit
style
to übergeben#extract
. Jedoch ... wenn Sie einstellenallChunks=false
, werden keine CSS-Dateien für nicht initiale Chunks erstellt. Daher muss bekannt sein, mit welchem Loader die Seite eingefügt werden soll.Tipp: Webpack ist ein Tool, das wirklich gründlich verstanden werden muss, da sonst viele seltsame Probleme auftreten können.
quelle
Webpack 2
Wenn Sie Webpack 2 verwenden, funktioniert diese Variante:
Die neue Extraktionsmethode akzeptiert nicht mehr drei Argumente und wird beim Übergang von V1 zu V2 als wichtige Änderung aufgeführt.
https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change
quelle
Ich fand die Lösung für mein Problem heraus:
Anstatt die Lader ineinander zu leiten (
ExtractTextPlugin.extract('style-loader!css-loader')
), müssen Sie jeden Lader als separaten Parameter übergeben:ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')
quelle
extract
Funktion nimmt drei Parameter an:(before, loader, options)
und diese Antwort deckt das perfekt ab: stackoverflow.com/a/30982133/1346510'style', 'css', 'sass'
einfach ändern können'style', 'css!sass'
- Danke!