Frage Fenster nicht definiert Fehler bei Verwendung von extract-text-webpack-plugin React


Ich benutze Webpack um meine reagierenden Komponenten zu bauen und ich versuche das zu benutzen extract-text-webpack-plugin um meine CSS von meiner generierten JS-Datei zu trennen. Wenn ich jedoch versuche, die Komponente zu erstellen, erhalte ich den folgenden Fehler: 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')
  ]
}

76
2018-01-29 19:31


Ursprung


Antworten:


Sie möchten vielleicht verwenden style-loader Als ein before Argument in extract Funktion.

Hier ist die native Implementierung:

    ExtractTextPlugin.extract = function(before, loader, options) {
        if(typeof loader === "string") {
            return [
                ExtractTextPlugin.loader(mergeOptions({omit: before.split("!").length, extract: true, remove: true}, options)),
                before,
                loader
            ].join("!");
        } else {
            options = loader;
            loader = before;
            return [
                ExtractTextPlugin.loader(mergeOptions({remove: true}, options)),
                loader
            ].join("!");
        }
    };

Also, was Sie tun müssen, ist:

{
    test: /\.sass$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract('style-loader', 'css!sass?indentedSyntax=true&sourceMap=true')
},

wenn Sie zum Beispiel verwenden sass.


59
2018-06-22 14:11



Ich habe keine Erklärung für die Ursache gefunden, daher habe ich diese Antwort hier gepostet.

Von https://github.com/webpack/extract-text-webpack-plugin#api

ExtractTextPlugin.extract([notExtractLoader], loader, [options])   Erstellt einen Extraktionslader aus einem vorhandenen Lader.

notExtractLoader (optional) die Loader, die verwendet werden sollten, wenn das css nicht extrahiert wird (d. h. in einem> zusätzlichen Chunk, wenn allChunks: false)

loader die Ladeprogramme, die zum Konvertieren der Ressource in ein CSS-Exportmodul verwendet werden sollen.

options

publicPath Überschreiben Sie die Einstellung publicPath für diesen Loader.

Das #extract Methode sollte einen Loader erhalten, der ausgibt css. Was geschah, war, dass es einen style-loader was ausgibt JavaScript-Code, die in eine Webseite eingefügt werden soll. Dieser Code würde versuchen, darauf zuzugreifen window.

Sie sollten keine Loader-Zeichenfolge mit übergeben style zu #extract. Aber ... wenn du es einstellst allChunks=false, dann werden keine CSS-Dateien für nicht initiale Chunks erstellt. Daher muss es wissen, welcher Lader verwendet werden soll, um in die Seite zu injizieren.

Tipp: Webpack ist ein Werkzeug, das wirklich gründlich verstanden werden muss, oder Sie können viele seltsame Probleme haben.


41
2018-02-12 17:58



Webpack 2

Wenn Sie Webpack 2 verwenden, funktioniert diese Variante:

    rules: [{
        test: /\.css$/,
        exclude: '/node_modules/',
        use: ExtractTextPlugin.extract({
            fallback: [{
                loader: 'style-loader',
            }],
            use: [{
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                },
            }, {
                loader: 'postcss-loader',
            }],
        }),
    }]

Die neue Extraktionsmethode benötigt nicht länger drei Argumente und wird beim Übergang von V1 zu V2 als Bruchänderung aufgeführt.

https://webpack.js.org/guides/migrating/#extracttextwebpackplugin-breaking-change


19
2018-02-12 15:49



Ich habe die Lösung für mein Problem gefunden:

Anstatt die Lader ineinander zu stecken (ExtractTextPlugin.extract('style-loader!css-loader')), muss jeder Lader als separater Parameter übergeben werden: ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')


12
2017-11-06 16:28