Webpack 4 और मॉड्यूल में कॉन्फ़िगरेशन फ़ाइल को विभाजित करना

नमस्कार, हेब्र! आज मैं आपको अलग-अलग मॉड्यूल में कोड के पृथक्करण के साथ ही वेबपैक 4 के बारे में बताऊंगा, साथ ही दिलचस्प समाधान जो आपको अपने वेबपैक 4 असेंबली को तेजी से बनाने में मदद करेंगे। अंत में, मैं अपने मूल वेबपैक असेंबली को सबसे आवश्यक उपकरण प्रदान करूंगा, जिसे आप बाद में कर सकते हैं। विस्तार करने के लिए। यह असेंबली आपको इस सामग्री को समझने में मदद करेगी, और यह आपके कार्यान्वयन को तेज़ी से लिखने और संभावित समस्याओं को तेज़ी से हल करने में भी मदद कर सकती है।

इस विधानसभा की मुख्य विचारधारा webpack.config.js के उपयोग, पढ़ने और सफाई की सुविधा के लिए कॉन्फ़िगरेशन फ़ाइल के अंदर कोड का सही पृथक्करण है। देव और ठेस संस्करणों के लिए आवश्यक मॉड्यूल और प्लगइन्स (साथ ही मुख्य फ़ाइल में कार्यक्षमता के पृथक्करण के लिए) एक अलग वेबपैक फ़ोल्डर में स्थित होगा और इसे मुख्य कॉन्फ़िगरेशन से कनेक्ट करने के लिए आयात किया जाएगा।

इस दृष्टिकोण की आवश्यकता क्यों है?

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

हमें क्या चाहिए?

हम वेबपैक-मर्ज प्लगइन का उपयोग करेंगे।

हम वेबपैक फ़ोल्डर बनाते हैं और सभी अलग-अलग मॉड्यूल को अलग-अलग फाइलों में निकालते हैं। उदाहरण के लिए, webpack / pug.js, webpack / scss.js और उनसे ये कार्य निर्यात करें।

Pug.js फ़ाइल

module.exports = function() { return { module: { rules: [ { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true, }, }, ], }, }; }; 

Webpack.config.js फ़ाइल । इस फ़ाइल में हम उन्हें कनेक्ट करते हैं, और इस प्लगइन की मदद से हम आसानी से और जल्दी से कनेक्ट होते हैं।

 const merge = require('webpack-merge'); const pug = require('./webpack/pug'); const common = merge([ { entry: { 'index': PATHS.source + '/pages/index/index.js', 'blog': PATHS.source + '/pages/blog/blog.js', }, output: { path: PATHS.build, filename: './js/[name].js', }, plugins: […], optimization: { … }, }, pug(), ]); 

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

उत्पादन और विकास के लिए सेटिंग्स

अब, यदि हम इस अलगाव का उपयोग करेंगे, तो हम अपने अलगाव को समाप्त कर देंगे, और इन दो प्रकार के विकास के लिए अपने वेबपैक को कॉन्फ़िगर करेंगे, जिससे इस उपकरण का उपयोग करने के लिए अंत में सुविधाजनक होगा, और भविष्य में भी हम इसे लचीले ढंग से और किसी अन्य परियोजना के लिए कॉन्फ़िगर कर पाएंगे। या वर्तमान एक में विस्तार। वेबपैक 4 में नोड (वेबपैक के लिए) निर्यात करने के लिए, हम निम्नलिखित निर्माण का उपयोग करते हैं:

 module.exports = function(env, argv) { if (argv.mode === 'production') { return merge([ common, extractCSS(), favicon(), ]); } if (argv.mode === 'development') { return merge([ common, devserver(), sass(), css(), sourceMap(), ]); } 

सामान्य ऑब्जेक्ट में, हम कनेक्ट करते हैं जो कि ठेस और विकास दोनों में उपयोग किया जाता है, और शर्तों में हम केवल उन मॉड्यूल को कनेक्ट करते हैं जो इन मामलों में आवश्यक हैं।

अब मैं webpack 3 के बारे में webpack 4 की मुख्य विशेषताओं के बारे में बात करना चाहूंगा

• एक त्वरित शुरुआत के लिए, webpack 4 को webpack.config.js की आवश्यकता नहीं है, अब इसे केवल एक प्रविष्टि बिंदु (index.js) की आवश्यकता है
• नए संस्करण में, वेबपैक कमांड लाइन इंटरफ़ेस एक अलग पैकेज में है और आपको वेबपैक-क्ली स्थापित करने की आवश्यकता है।
• वेबपैक 4 को चलाने के लिए, आपको स्क्रिप्ट में (अन्यथा यह चेतावनी होगी) निर्दिष्ट करें मोड (संचालन का तरीका) - मोड उत्पादन या - मोड विकास, कुंजी के आधार पर, वेबपैक का संचालन बदलता है। विकास मोड का उद्देश्य बिल्ड को गति देना है। उत्पादन संस्करण में, सब कुछ कोड के अंतिम संशोधन के उद्देश्य से है।
• सामान्य.js और common.css फ़ाइलों को बनाने के लिए, CommonsChunkPlugin का उपयोग नहीं किया जाता है, इसके लिए स्प्लिटकॉन्च अब जिम्मेदार हैं और निम्न निर्माण का उपयोग किया जाता है:
  
  

    optimization: { splitChunks: { cacheGroups: { 'common': { minChunks: 2, chunks: 'all', name: 'common', priority: 10, enforce: true, }, }, }, }, 

  
  वेबपैक 3 में - यह प्लगइन्स में ऐसा होगा:
  
  

   new webpack.optimize.CommonsChunkPlugin({ name: 'common ', }) 

  
  तदनुसार, HtmlWebpackPlugin में विखंडू में हम कनेक्ट करते हैं (यहां परिवर्तन के बिना)।
  
  

   plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['index', 'common'], template: PATHS.source + '/pages/index/index.pug', }), ], 

  
  
• अगला महत्वपूर्ण बिंदु, सोर्सपाइप बनाने के लिए, हम अब निम्नलिखित दृष्टिकोण का उपयोग करते हैं - वेबपैक फ़ोल्डर में sourceMap.js फ़ाइल बनाएं और उदाहरण के लिए इसे देव संस्करण में कनेक्ट करें (जैसा कि ऊपर बताया गया है):
  
  

   module.exports = function() { return { devtool: 'eval-sourcemap', }; }; 

अब प्लगइन्स दृष्टिकोण : [नया webpack.optimize.UglifyJsPlugin ({})] काम नहीं करता है।

इसके साथ, मैं अपनी कहानी को पूरा करना चाहता हूं और अपनी मूल सभा प्रदान करना चाहता हूं - वेबपैक 4 का लिंक , जो शायद आपके काम और विकास में आपकी मदद करेगा। आपका ध्यान के लिए धन्यवाद!