निकालने-पाठ-वेबपैक-प्लगइन रिएक्ट का उपयोग करते समय विंडो को त्रुटि नहीं मिली

Question 1

मैं अपनी प्रतिक्रिया घटकों का निर्माण करने के लिए वेबपैक का उपयोग कर रहा हूं और extract-text-webpack-pluginअपनी जेनरेट की गई जेएस फाइल से अपनी सीएसएस को अलग करने के लिए उपयोग करने का प्रयास कर रहा हूं । हालाँकि, जब मैं घटक बनाने का प्रयास करता हूं तो मुझे निम्नलिखित त्रुटि मिलती है 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')
  ]
}

Question 2

आप फ़ंक्शन में 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।

Question 3

कारण का स्पष्टीकरण नहीं देखा इसलिए मैंने यह उत्तर यहाँ पोस्ट किया है।

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

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) मौजूदा लोडर से निकालने वाला लोडर बनाता है।

notExtractLoader (वैकल्पिक) लोडर (ओं) का उपयोग किया जाना चाहिए जब सीएसएस को नहीं निकाला जाता है (यानी जब एक अतिरिक्त चंक जब allChunks: false)

loader लोडर (ओं) का उपयोग संसाधन को css निर्यात मॉड्यूल में बदलने के लिए किया जाना चाहिए।

options

publicPath इस लोडर के लिए publicPath सेटिंग को ओवरराइड करें।

#extractविधि एक लोडर कि आउटपुट प्राप्त करना चाहिए css। क्या हो रहा था कि यह एक जावास्क्रिप्टstyle-loader आउटपुट को प्राप्त कर रहा था , जिसे एक वेबपेज में इंजेक्ट किया जाना था। यह कोड एक्सेस करने की कोशिश करेगा ।window

आप के साथ एक लोडर स्ट्रिंग पारित नहीं किया जाना चाहिए styleकरने के लिए #extract। हालांकि ... यदि आप सेट करते हैं allChunks=false, तो यह गैर-प्रारंभिक विखंडू के लिए सीएसएस फ़ाइलों का निर्माण नहीं करेगा। इसलिए यह जानना आवश्यक है कि पेज में इंजेक्ट करने के लिए किस लोडर का उपयोग किया जाए।

युक्ति: वेबपैक एक ऐसा उपकरण है जिसे वास्तव में गहराई से समझने की आवश्यकता है या आप बहुत सारे अजीब मुद्दों में भाग सकते हैं।

Question 4

वेबपैक २

यदि आप 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

Question 5

मुझे अपनी समस्या का हल पता चला:

लोडरों को एक-दूसरे में डालने के बजाय ExtractTextPlugin.extract('style-loader!css-loader'), आपको प्रत्येक लोडर को एक अलग पैरामीटर के रूप में पास करना होगा:ExtractTextWebpackPlugin.extract('style-loader', 'css-loader')