Câu hỏi cửa sổ không được xác định lỗi khi sử dụng giải nén văn bản-webpack-plugin React


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 được 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')
  ]
}

76
2018-01-29 19:31


gốc


tôi đã tìm ra câu trả lời. thay vì ExtractTextPlugin.extract('style-loader!css-loader') bạn phải viết ExtractTextPlugin.extract('style-loader', 'css-loader') - Ganonside
Bạn có thể chuyển nó thành câu trả lời và đánh dấu vấn đề được giải quyết không? Cảm ơn. - Juho Vepsäläinen
Tôi vừa làm. Xin lỗi vì điều đó. - Ganonside


Các câu trả lời:


Bạn có thể muốn sử dụng style-loader như một before đối số trong extract chức năng.

Đây là 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, basicaly 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.


59
2018-06-22 14:11



Điều này giải quyết cho tôi làm việc với Stylus quá. Cảm ơn @squixy! - Gabriel Godoy
Nếu bạn đang gặp vấn đề với scss không sass, sau đó loại bỏ thụt vàoSyntax = true - Robert Leggett


Không thấy lời giải thích về nguyên nhân nên tôi đã đăng câu trả lời này ở đây.

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

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

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

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

options

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

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

Bạn không nên vượt qua chuỗi trình tải với style đến #extract. Tuy nhiên ... nếu bạn đặt allChunks=false, sau đó nó sẽ không xây dựng các tệp CSS cho các khối không phải ban đầu. Vì vậy nó cần phải biết những gì bộ nạp để sử dụng để tiêm vào trang.

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


41
2018-02-12 17:58



Những điều tốt nhất tôi từng nghe về webpack. - Jide
xin lỗi vì không có lời giải thích trong câu trả lời của tôi. Các tài liệu webpack vẫn đang được viết (và vẫn có thể) tại thời điểm tôi đăng câu hỏi và câu trả lời. Nhưng tôi đồng ý rằng nó cần phải được hiểu khá rõ. - Ganonside
Nội dung chất lượng cao ở đây. Nếu các tài liệu có một nửa tốt như thế này, tôi sẽ là một lập trình viên thực sự hạnh phúc. - Rocío García Luque


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 thức trích xuất mới không còn mất ba đối số nữa và được liệt kê dưới dạng thay đổi đột phá khi di chuyển từ V1 sang V2.

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


19
2018-02-12 15:49



Điều này giải quyết vấn đề cho tôi, cảm ơn bạn. - Anthony Cregan
Đó là giải pháp phù hợp để sử dụng Webpack 2. - Chaos


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

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


12
2017-11-06 16:28



Khá chắc chắn đây là những gì @squixy nói phải làm 5 tháng trước. - cchamberlain
Câu lệnh "mỗi bộ nạp như một tham số riêng biệt" chỉ đúng cho hai bộ nạp và sai cho ba hoặc nhiều hơn. Các extract chức năng có ba tham số: (before, loader, options)và câu trả lời này bao gồm hoàn toàn: stackoverflow.com/a/30982133/1346510 - sompylasar
@sompylasar cảm ơn bạn rất nhiều vì nhận xét này. Nó đã giải quyết được vấn đề của tôi! Tôi cho rằng tất cả các thông số được thông qua sẽ chỉ được lặp thẳng. Vui lòng nói rằng nếu bạn cần sử dụng 'style', 'css', 'sass' thì bạn có thể thay đổi nó thành 'style', 'css!sass' - Cảm ơn! - Aleski
CÁI NÀY SAI đọc các nhận xét hoặc câu trả lời ở trên. Đặt điều này in đậm bởi vì ai đó sẽ đọc câu trả lời này và không hiểu tại sao ExtractTextPlugin không sử dụng tất cả các trình tải của họ. - Don P
Câu trả lời khác dường như làm việc cho người khác nhưng khi tôi đăng câu hỏi thì đây là những gì đã làm việc cho tôi vì vậy tôi đã đánh dấu nó. - Ganonside