webpack
लोडर
खोज…
टिप्पणियों
वेबपैक लोडर को "प्रीलेलेयर्स", "लोडर" और "पोस्टलोइटर्स" के रूप में कॉन्फ़िगर किया जा सकता है। यद्यपि उन्हें होना नहीं है, विन्यास जो लाइनिंग या अन्य अनिवार्य या धारावाहिक संचालन का उपयोग करते हैं, वे पाइपलाइन में इन निर्माण चरणों का लाभ उठा सकते हैं।
लोडरों को समझने और उनके उपयोग की कुंजी यह है कि वेबपैक लोडर प्रणाली के माध्यम से प्रत्येक ग्राफ को आवश्यकता ग्राफ में चलाएगा। ऊपर दिए गए उदाहरण के बाद, इसका मतलब है कि जैसा कि वेबपैक आपके एप्लिकेशन के आयात के माध्यम से क्रॉल करना शुरू कर देता है, यह आवश्यक फाइलों की पहचान करेगा और एक सरल रीगेक्स का उपयोग करके यह निर्धारित करेगा कि किस फाइल या फ़ाइल प्रकार के लिए लोडर या लोडर की श्रृंखला की आवश्यकता है।
ऊपर आप देख सकते हैं कि सभी ".js" या ".jsx" फाइलें पूर्व-लोडर चरण में एस्लिंट-लोडर द्वारा es-linted होंगी। अन्य js|x फ़ाइल प्रकार भी मुख्य लोडर चरण में बेबल-लोडर के माध्यम से चलाए जाएंगे। इसके अलावा, एक ही चरण में, किसी भी .scss फाइल को sass-loader में लोड किया जाएगा। यह आपको अपने जेएस मॉड्यूल में सैस फ़ाइलों को आयात करने की अनुमति देता है और उनके परिणामस्वरूप जेएस बंडल या यहां तक कि एक अलग स्टैंडअलोन सीएसएस बंडल (एक प्लगइन का उपयोग करके) के लिए आउटपुट होना चाहिए।
ध्यान दें: .scss फ़ाइलें आयात करना केवल Webpack और एक उपयुक्त लोडर के साथ काम करेगा। पूर्व-प्रोसेसर या ट्रांसपिलर के बिना नोड इस तरह के आयात को नहीं समझेगा।
इसके अलावा .scss उदाहरण में ध्यान दें "चेन" लोडर की क्षमता का उपयोग कर रहा है ! विभिन्न लोडरों के बीच "पाइप" के रूप में विस्मयादिबोधक चिह्न। ऊपर दिए गए उदाहरण "sass-loader" के आउटपुट को "css-loader" में और अंत में "स्टाइल-लोडर" को पाइप करते हैं। यह लोडर के एक सरणी के साथ भी किया जा सकता है loaders: ['style-loader', 'css-loader', 'sass-loader'] । इनलाइन लोडर परिभाषाओं में विभिन्न विकल्प भी उपलब्ध हैं और आमतौर पर URL में पाए जाने वाले क्वेरी पैरामीटर सिंटैक्स का पालन करते हैं।
इसे भी देखें: https://webpack.github.io/docs/loaders.html
एस्किल्ट के लिए प्रीएलैडर का उपयोग करके कॉन्फ़िगर करें, जेएसएक्स और सीएसएस लोडर चेनिंग के लिए बैबल।
निम्न कॉन्फ़िगरेशन का उपयोग आपके प्रोजेक्ट को लाइब्रेरी के रूप में बंडल करने के लिए बेस कॉन्फ़िगरेशन के रूप में किया जा सकता है। ध्यान दें कि मॉड्यूल कॉन्फ़िगरेशन में प्रीलेयर्स और लोडर की सूची कैसे होती है।
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, '..', 'src/index.js'),
output: {
path: path.join(__dirname, '..', '/lib'),
filename: outputFile,
library: 'myCoolBundle.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
preLoaders: [
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: /node_modules/,
}
],
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: ['babel'],
exclude: /(node_modules)/,
include: path.join(__dirname, '..'),
query: {
presets: [ 'es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader!sass-loader"]
}
]
},
resolve: {
root: path.resolve(__dirname, '..', './src'),
extensions: ['', '.js', '.jsx', '.scss'],
fallback: path.join(__dirname, '../node_modules')
},
eslint: {
configFile: path.resolve(__dirname, '..', '.eslintrc'),
}
};