React bileşenlerimi oluşturmak için webpack kullanıyorum ve css'imi extract-text-webpack-pluginoluşturulan js dosyamdan ayırmak için kullanmaya çalışıyorum . Ben bileşeni oluşturmak için girişimi Ancak, aşağıdaki hatayı alıyorum: Module build failed: ReferenceError: window is not defined.

Webpack.config.js dosyam şöyle görünüyor:

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

İşlevde style-loaderbir beforeargüman olarak kullanmak isteyebilirsiniz extract.

İşte yerel uygulama:

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

Temel olarak yapmanız gereken şey:

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

örneğin kullanırsanız sass.

Nedeni hakkında bir açıklama görmedim, bu yüzden bu cevabı buraya gönderdim.

Gönderen https://github.com/webpack/extract-text-webpack-plugin#api

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) Mevcut bir yükleyiciden bir ayıklama yükleyicisi oluşturur.

notExtractLoader (isteğe bağlı) css çıkarılmadığında kullanılması gereken yükleyiciler (yani allChunks: false olduğunda> ek bir yığın halinde)

loader kaynağı bir css dışa aktarma modülüne dönüştürmek için kullanılması gereken yükleyiciler.

options

publicPath bu yükleyici için publicPath ayarını geçersiz kılın.

#extractYöntem, bir yükleyici bu çıkışları almalıdır css. Olan şey, bir web sayfasına enjekte edilmesi amaçlanan bir javascript kodustyle-loader çıktı almasıydı . Bu kod erişmeye çalışacaktır window.

Sen bir yükleyici dizesi geçirmek olmamalıdır styleiçin #extract. Ancak ... ayarlarsanız allChunks=false, başlangıç ​​olmayan parçalar için CSS dosyaları oluşturmaz. Bu nedenle, sayfaya enjekte etmek için hangi yükleyicinin kullanılacağını bilmesi gerekir.

İpucu: Webpack, gerçekten derinlemesine anlaşılması gereken bir araçtır veya birçok garip sorunla karşılaşabilirsiniz.

Web paketi 2

Webpack 2 kullanıyorsanız, bu varyasyon çalışır:

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

Yeni ayıklama yöntemi artık üç bağımsız değişken almıyor ve V1'den V2'ye geçerken bir son değişiklik olarak listeleniyor.

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

Sorunumun çözümünü buldum:

Yükleyicileri ExtractTextPlugin.extract('style-loader!css-loader')birbirine bağlamak yerine ( ), her bir yükleyiciyi ayrı bir parametre olarak aktarmanız gerekir:ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')