Я використовую webpack для побудови моїх компонентів реакції, і намагаюся використати, extract-text-webpack-pluginщоб відокремити мій css від згенерованого js-файлу. Однак, коли я намагаюся побудувати компонент я отримую наступне повідомлення про помилку: Module build failed: ReferenceError: window is not defined.

Мій файл webpack.config.js виглядає так:

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

Ви можете використовувати style-loaderяк beforeаргумент у extractфункції.

Ось власна реалізація:

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

Отже, в основному, що вам потрібно зробити, це:

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

якщо ви, наприклад, використовуєте sass.

Не побачив пояснення причини, тому я розмістив цю відповідь тут.

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

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) Створює витягуючий навантажувач із існуючого навантажувача.

notExtractLoader (необов’язково) навантажувач (и), який слід використовувати, коли css не витягується (тобто в> додатковий шматок, коли allChunks: false)

loader завантажувач (и), який слід використовувати для перетворення ресурсу в модуль експорту css.

options

publicPath перевизначити параметр publicPath для цього завантажувача.

#extractМетод повинен отримати завантажувач , який виводить css. Що відбувалося, це те, що він отримував код , який style-loaderвиводить код JavaScript , який призначений для введення на веб-сторінку. Цей код намагається отримати доступ window.

Ви не повинні передавати рядок навантажувача з styleна #extract. Однак ... якщо ви встановите allChunks=false, то він не буде створювати файли CSS для непочаткових фрагментів. Тому він повинен знати, який завантажувач використовувати для введення на сторінку.

Порада: Webpack - це інструмент, який дійсно потрібно розуміти поглиблено, інакше ви можете зіткнутися з безліччю дивних питань.

Веб-пакет 2

Якщо ви використовуєте Webpack 2, цей варіант працює:

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

Новий метод вилучення більше не приймає трьох аргументів і перерахований як зламану зміну при переході з V1 на V2.

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

Я придумав рішення своєї проблеми:

Замість того, щоб прокладати навантажувачі один в одного ( ExtractTextPlugin.extract('style-loader!css-loader')), вам потрібно передати кожен навантажувач як окремий параметр:ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')