Używam pakietu webpack do budowania moich komponentów reagowania i próbuję użyć extract-text-webpack-plugindo oddzielenia mojego css od mojego wygenerowanego pliku js. Jednak, gdy próbuję zbudować komponentu pojawia się następujący błąd: Module build failed: ReferenceError: window is not defined.

Mój plik webpack.config.js wygląda następująco:

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')
  ]
}

Możesz użyć style-loaderjako beforeargumentu w extractfunkcji.

Oto natywna implementacja:

    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("!");
        }
    };

Więc w zasadzie to, co musisz zrobić, to:

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

jeśli na przykład używasz sass.

Nie widziałem wyjaśnienia przyczyny, więc zamieściłem tę odpowiedź tutaj.

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

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) Tworzy program ładujący wyodrębniający z istniejącego programu ładującego.

notExtractLoader (opcjonalnie) programy ładujące, które powinny być używane, gdy css nie jest wyodrębniany (tj. w dodatkowej porcji, gdy allChunks: false)

loader moduł (i) ładujące, które powinny być użyte do konwersji zasobu do modułu eksportującego css.

options

publicPath zastępuje ustawienie publicPath dla tego programu ładującego.

#extractSposób powinien otrzymać Loader wyjścia css. To, co się działo, polegało na tym, że otrzymywał plik, style-loaderktóry generuje kod javascript , który ma zostać wstrzyknięty na stronę internetową. Ten kod będzie próbował uzyskać dostęp window.

Nie należy przekazywać ciągu ładującego z styledo #extract. Jednak ... jeśli ustawisz allChunks=false, nie będzie budować plików CSS dla fragmentów innych niż początkowe. Dlatego musi wiedzieć, jakiego modułu ładującego użyć, aby wstrzyknąć na stronę.

Wskazówka: Webpack to narzędzie, które naprawdę wymaga dogłębnego zrozumienia, w przeciwnym razie możesz napotkać wiele dziwnych problemów.

Pakiet internetowy 2

Jeśli używasz Webpack 2, ta odmiana działa:

    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',
            }],
        }),
    }]

Nowa metoda wyodrębniania nie przyjmuje już trzech argumentów i jest wyświetlana jako istotna zmiana podczas przechodzenia z wersji V1 do V2.

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

Znalazłem rozwiązanie mojego problemu:

Zamiast podłączać moduły ExtractTextPlugin.extract('style-loader!css-loader')ładujące do siebie nawzajem ( ), musisz przekazać każdy moduł ładujący jako oddzielny parametr:ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')