Tôi đang sử dụng webpack để xây dựng các thành phần phản ứng của mình và tôi đang cố gắng sử dụng extract-text-webpack-pluginđể tách css của tôi khỏi tệp js đã tạo của tôi. Tuy nhiên, khi tôi cố gắng để xây dựng các thành phần tôi nhận được lỗi sau: Module build failed: ReferenceError: window is not defined.

Tệp webpack.config.js của tôi trông giống như sau:

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

Bạn có thể muốn sử dụng style-loaderlàm befoređối số trong extracthàm.

Đây là cách triển khai gốc:

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

Vì vậy, cơ bản những gì bạn cần làm là:

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

nếu bạn sử dụng ví dụ sass.

Không thấy giải thích nguyên nhân nên mình đăng câu trả lời này lên đây.

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

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) Tạo trình tải giải nén từ trình tải hiện có.

notExtractLoader (tùy chọn) (các) trình tải sẽ được sử dụng khi css không được trích xuất (tức là trong một> đoạn bổ sung khi allChunks: false)

loader (các) bộ tải sẽ được sử dụng để chuyển đổi tài nguyên thành mô-đun xuất css.

options

publicPath ghi đè cài đặt publicPath cho trình tải này.

Các #extractphương pháp sẽ nhận được một bộ nạp đầu ra mà css. Điều đã xảy ra là nó đang nhận được một mãstyle-loader xuất ra mã javascript , mã này được dự định đưa vào một trang web. Mã này sẽ cố gắng truy cập window.

Bạn không nên chuyển một chuỗi trình tải với styletới #extract. Tuy nhiên ... nếu bạn đặt allChunks=false, thì nó sẽ không tạo tệp CSS cho các phần không phải ban đầu. Do đó, nó cần phải biết bộ tải cần sử dụng để đưa vào trang.

Mẹo: Webpack là một công cụ thực sự cần được hiểu chuyên sâu nếu không bạn có thể gặp phải rất nhiều vấn đề lạ.

Webpack 2

Nếu bạn đang sử dụng Webpack 2, biến thể này hoạt động:

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

Phương pháp trích xuất mới không còn nhận ba đối số và được liệt kê là một thay đổi đột phá khi chuyển từ V1 sang V2.

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

Tôi đã tìm ra giải pháp cho vấn đề của mình:

Thay vì nối các bộ nạp vào nhau ( ExtractTextPlugin.extract('style-loader!css-loader')), bạn phải chuyển mỗi bộ nạp dưới dạng một tham số riêng biệt:ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')