क्या मैं सीएसएस और जेएस को अलग से उत्पन्न करने के लिए वेबपैक का उपयोग कर सकता हूं?

Question

मेरे पास है:

1. जेएस फ़ाइलें जिन्हें मैं बंडल करना चाहता हूं।
2. कम फ़ाइलें जिन्हें मैं सीएसएस में संकलित करना चाहता हूं (@imports को एक बंडल में हल करना)।

मैं इन्हें दो अलग-अलग इनपुट के रूप में निर्दिष्ट करने की उम्मीद कर रहा था और दो अलग-अलग आउटपुट (संभवतः निकालने-टेक्स्ट-वेबपैक-प्लगइन के माध्यम से) होने की उम्मीद कर रहा था। वेबपैक में संकलन करने के लिए सभी उचित प्लगइन्स/लोडर हैं, लेकिन यह अलग होने की तरह प्रतीत नहीं होता है।

मैंने उन लोगों के उदाहरणों को देखा है जो सीधे अपनी जेएसई फाइलों की आवश्यकता है, जैसे कि require('./app.less');, वेबपैक को बंडल में शामिल करने के लिए वेबपैक को बताने के अलावा अन्य कारणों से। यह आपको केवल एक प्रविष्टि बिंदु होने की अनुमति देता है, लेकिन यह वास्तव में मेरे लिए गलत लगता है - मुझे अपने जेएस कोड में कम करने की आवश्यकता क्यों होगी जब मेरे जेएस कोड से कोई लेना देना नहीं है?

मैंने एकाधिक प्रविष्टि बिंदुओं का उपयोग करने की कोशिश की, जिसमें एंट्री जेएस और मुख्य कम फ़ाइल दोनों को सौंप दिया गया, लेकिन एकाधिक प्रविष्टि बिंदुओं का उपयोग करते समय, वेबपैक एक बंडल उत्पन्न करता है जो जेएस को लोड पर निष्पादित नहीं करता है - यह सब कुछ बंडल करता है, लेकिन पता नहीं है स्टार्टअप पर क्या निष्पादित किया जाना चाहिए।

क्या मैं बस वेबपैक गलत उपयोग कर रहा हूं? क्या मुझे इन अलग मॉड्यूल के लिए वेबपैक के अलग-अलग उदाहरण चलाना चाहिए? क्या मुझे गैर-जेएस संपत्तियों के लिए भी वेबपैक का उपयोग करना चाहिए यदि मैं उन्हें अपने जेएस में मिश्रण नहीं कर रहा हूं?

Answer 1

क्या मुझे गैर-जेएस संपत्तियों के लिए भी वेबपैक का उपयोग करना चाहिए यदि मैं उन्हें अपने जेएस में मिश्रित नहीं कर रहा हूं?

शायद नहीं। वेबपैक निश्चित रूप से जेएस-केंद्रित है, अंतर्निहित धारणा के साथ कि आप जो बना रहे हैं वह एक जेएस एप्लीकेशन है। require() का कार्यान्वयन आपको सब कुछ एक मॉड्यूल (सास/कम आंशिक, जेएसओएन, बहुत कुछ भी शामिल है) के रूप में इलाज करने की अनुमति देता है, और स्वचालित रूप से आपके लिए निर्भरता प्रबंधन करता है (जो कुछ भी आप require बंडल किया गया है, और कुछ भी नहीं)।

मुझे अपने जेएस कोड से कम करने की आवश्यकता क्यों नहीं है जब मेरे जेएस कोड में मुझे कुछ भी नहीं चाहिए?

लोग ऐसा इसलिए करते हैं क्योंकि वे अपने आवेदन के एक टुकड़े को परिभाषित कर रहे हैं (उदाहरण के लिए एक प्रतिक्रिया घटक, एक बैकबोन व्यू) जेएस के साथ। एप्लिकेशन के उस टुकड़े में सीएसएस है जो इसके साथ जाता है। कुछ बाहरी सीएसएस संसाधनों के आधार पर जो अलग-अलग बनाया गया है और जेएस मॉड्यूल से सीधे संदर्भित नहीं किया गया है, नाजुक, काम करने में कठिन है, और शैलियों को पुराना हो सकता है आदि। वेबपैक आपको सब कुछ मॉड्यूलर रखने के लिए प्रोत्साहित करता है, इसलिए आपके पास एक सीएसएस है (एसएएस, जो भी हो) आंशिक जो उस जेएस घटक के साथ जाता है, और जेएस घटक require() एस निर्भरता को स्पष्ट करने के लिए (आप और निर्माण उपकरण के लिए, जो कभी भी शैलियों को नहीं बनाता है) की आवश्यकता नहीं है।

मुझे नहीं पता कि क्या आप वेबपैक का उपयोग स्वयं सीएसएस को बंडल करने के लिए कर सकते हैं (जब सीएसएस फाइलों को किसी भी जेएस से संदर्भित नहीं किया जाता है)। मुझे यकीन है कि आप प्लगइन इत्यादि के साथ कुछ तार कर सकते हैं, लेकिन यह सुनिश्चित नहीं है कि यह बॉक्स से बाहर संभव है। यदि आप अपने जेएस से सीएसएस फाइलों का संदर्भ देते हैं, तो आप आसानी से सीएसएस को एक्सट्रैक्ट टेक्स्ट प्लगइन के साथ एक अलग फ़ाइल में बंडल कर सकते हैं, जैसा कि आप कहते हैं।

Answer 2

एक अलग सीएसएस बंडल अपने जे एस में से किसी में require('main/less) का उपयोग किए बिना उत्पन्न किया जा सकता है, लेकिन के रूप में ब्रेंडन उसके जवाब Webpack के पहले भाग में बताया नहीं बनाया गया है एक वैश्विक सीएसएस बंडल, मॉड्यूलर जे एस के साथ जाने के लिए लेकिन वहाँ कुछ विकल्प हैं।

var webpack = require('webpack'), 
    ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: { 
     home: [ 
      'js/common', 
      'js/homepage' 
     ], 
     style: [ 
      'styles/main.less' 
     ] 
    }, 
    output: { 
     path: 'dist', 
     filename: "[name].min.js" 
    }, 
    resolve: { 
     extensions: ["", ".js"] 
    }, 
    module: { 
     loaders: [{ 
      test: /\.less$/, 
      loader: ExtractTextPlugin.extract("style", "css", "less") 
     }] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("[name].min.css", { 
      allChunks: true 
     }) 
    ] 
}; 

इस विधि के साथ समस्या आप भी एक अवांछित जे एस फाइल उत्पन्न किया जाता है:

पहले main.less के लिए एक अतिरिक्त प्रविष्टि बिंदु जोड़ने के लिए है, तो निकालें पाठ प्लगइन का उपयोग सीएसएस समूह बनाने की सुविधा है साथ ही साथ बंडल, इस उदाहरण में: style.js जो कि एक खाली वेबपैक मॉड्यूल है।

एक अन्य विकल्प के लिए एक मौजूदा Webpack प्रवेश बिंदु करने के लिए मुख्य कम फ़ाइल जोड़ने के लिए है: अगर आप केवल 1 प्रवेश बिंदु है

var webpack = require('webpack'), 
    ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: { 
     home: [ 
      'js/common', 
      'js/homepage', 
      'styles/main.less' 
     ], 
    }, 
    output: { 
     path: 'dist', 
     filename: "[name].min.js" 
    }, 
    resolve: { 
     extensions: ["", ".js"] 
    }, 
    module: { 
     loaders: [{ 
      test: /\.less$/, 
      loader: ExtractTextPlugin.extract("style", "css", "less") 
     }] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("[name].min.css", { 
      allChunks: true 
     }) 
    ] 
}; 

यह आदर्श है, लेकिन अगर आप अधिक है, तो अपने Webpack config दिखेगा थोड़ा अजीब है क्योंकि आपको मनमाने ढंग से चुनना होगा कि कौन सी प्रविष्टि बिंदु मुख्य कम फ़ाइल को जोड़ना है।

Answer 3

आगे bdmason के पूर्व जवाब स्पष्ट करने के लिए - ऐसा लगता है वांछनीय विन्यास इतना की तरह प्रत्येक पृष्ठ के लिए एक जे एस और सीएसएस समूह बनाने की सुविधा, होगा:

entry: { 
     Home: ["./path/to/home.js", "./path/to/home.less"], 
     About: ["./path/to/about.js", "./path/to/about.less"] 
    } 

और फिर का उपयोग [name] स्विच:

output: { 
     path: "path/to/generated/bundles", 
     filename: "[name].js" 
    }, 
plugins: new ExtractTextPlugin("[name].css") 

पूर्ण विन्यास - के साथ कुछ अतिरिक्त प्रश्न से जुड़ा नहीं (हम वास्तव में एस.ए.एस.एस. का उपयोग कर रहे कम के बजाय):

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
require('babel-polyfill'); 

module.exports = [{ 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: { 
     Home: ['babel-polyfill', "./home.js","path/to/HomeRootStyle.scss"], 
     SearchResults: ['babel-polyfill', "./searchResults.js","path/to/SearchResultsRootStyle.scss"] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015'], 
        plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
       } 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract("style-loader","css-raw-loader!sass-loader") 
      } 
     ] 
    }, 
    output: { 
     path: "./res/generated", 
     filename: "[name].js" 
    }, 
    plugins: debug ? [new ExtractTextPlugin("[name].css")] : [ 
     new ExtractTextPlugin("[name].css"), 
     new webpack.DefinePlugin({ 
      'process.env':{ 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress:{ 
       warnings: true 
      } 
     }) 
    ] 
} 
]; 

Answer 4

तुम भी रख सकते हैं अपने कम भी अपनी प्रविष्टि जे एस फ़ाइल में बयान की आवश्यकता होती है:

body.js

// CSS 
require('css/_variable.scss') 
require('css/_npm.scss') 
require('css/_library.scss') 
require('css/_lib.scss') 

फिर webpack में

में

entry: { 
    body: [ 
     Path.join(__dirname, '/source/assets/javascripts/_body.js') 
    ] 
    }, 

const extractSass = new ExtractTextPlugin({ 
    filename: 'assets/stylesheets/all.bundle.css', 
    disable: process.env.NODE_ENV === 'development', 
    allChunks: true 
})