Webpack config में कई आउटपुट पथ कैसे बनाएँ

Question

क्या किसी को पता है कि webpack.config.js फ़ाइल में कई आउटपुट पथ कैसे बनाएं? मैं बूटस्ट्रैप-एसएएस का उपयोग कर रहा हूं, जो कुछ अलग-अलग फ़ॉन्ट फ़ाइलों के साथ आता है, आदि वेबपैक के लिए इन में मैंने फ़ाइल-लोडर को शामिल किया है जो सही तरीके से काम कर रहा है, हालांकि इसे आउटपुट करने वाली फ़ाइलों को आउटपुट पथ पर सहेजा जा रहा है जिसे मैंने निर्दिष्ट किया है। मेरी बाकी फाइलें:

    output: {
      path: __dirname + "/js",
      filename: "scripts.min.js"
    }

मैं कुछ हासिल करना चाहता हूं, जहां मैं शायद जो भी वेबपैक आउटपुट कर रहा हूं और .woff, इत्यादि में समाप्त होने वाली चीजों के लिए एक्सटेंशन प्रकारों को देख सकता हूं, उन्हें एक अलग आउटपुट पथ पर डायवर्ट कर दिया है। क्या यह संभव है?

मैंने थोड़ा गुगली किया और इस * मुद्दे पर जीथब पर आया जहां समाधान के एक जोड़े की पेशकश की जाती है, संपादित करें:

लेकिन ऐसा लगता है जैसे आपको हैश विधि का उपयोग करके आउटपुट निर्दिष्ट करने में सक्षम प्रविष्टि बिंदु को जानने की आवश्यकता है जैसे:

var entryPointsPathPrefix = './src/javascripts/pages';
var WebpackConfig = {
  entry : {
    a: entryPointsPathPrefix + '/a.jsx',
    b: entryPointsPathPrefix + '/b.jsx',
    c: entryPointsPathPrefix + '/c.jsx',
    d: entryPointsPathPrefix + '/d.jsx'
  },

  // send to distribution
  output: {
    path: './dist/js',
    filename: '[name].js'
  }
}

* https://github.com/webpack/webpack/issues/1189

हालाँकि, मेरे मामले में, जहाँ तक फॉन्ट फाइल्स का सवाल है, इनपुट प्रक्रिया एक तरह से अमूर्त है और मुझे पता है कि आउटपुट है। परिवर्तनों के दौर से गुजर रही मेरी अन्य फ़ाइलों के मामले में, एक ज्ञात बिंदु है जहां मुझे उन्हें अपने लोडरों द्वारा नियंत्रित करने की आवश्यकता होती है। अगर यह पता लगाने का एक तरीका था कि यह चरण कहां हो रहा है, तो मैं आउटपुट पथों को अनुकूलित करने के लिए हैश विधि का उपयोग कर सकता हूं, लेकिन मुझे नहीं पता कि इन फ़ाइलों की आवश्यकता कहां है।

Answer 1

मुझे यकीन नहीं है कि अगर हमारे पास एक ही समस्या है क्योंकि वेबपैक जून 2016 के अनुसार कॉन्फ़िगरेशन के प्रति केवल एक आउटपुट का समर्थन करता है। मुझे लगता है कि आपने पहले ही गितुब पर मुद्दा देखा था ।

लेकिन मैं मल्टी-कंपाइलर का उपयोग करके आउटपुट पथ को अलग करता हूं । (अर्थात कॉन्फ़िगरेशन ऑब्जेक्ट को अलग करना webpack.config.js)।

var config = {
    // TODO: Add common Configuration
    module: {},
};

var fooConfig = Object.assign({}, config, {
    name: "a",
    entry: "./a/app",
    output: {
       path: "./a",
       filename: "bundle.js"
    },
});
var barConfig = Object.assign({}, config,{
    name: "b",
    entry: "./b/app",
    output: {
       path: "./b",
       filename: "bundle.js"
    },
});

// Return Array of Configurations
module.exports = [
    fooConfig, barConfig,       
];

यदि आपके बीच सामान्य कॉन्फ़िगरेशन है, तो आप विस्तृत लाइब्रेरी या Object.assignES6 में या {...}ES7 में ऑपरेटर को फैला सकते हैं।

Comments

मैंने स्निपेट नहीं चलाया, कुछ त्रुटि या टाइपो हो सकती है

— येओ

मैंने आपका स्निपेट चलाया, आकर्षण की तरह काम करता है ... आश्चर्यचकित कोई भी नहीं देखा गया है, एह सामने डेवलपर्स, कोई धैर्य नहीं है, हमेशा जल्दी में ;-)। मैं निर्यात उसी तरह configs, लेकिन मेरी घोषणा अलग / मानक है: var config = {प्रविष्टि: SOURCE_DIR + '/index.jsx', ....} किसी भी बहु संकलक के साथ-साथ उपयोग नहीं किया था: - \

— बैंगन

या आप सिर्फ npm में एक webpack && cp आदि कर सकते हैं ?

— सुपरब्यूपरड्यूप जूल

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

— एड्रियन मोइसा

<pre> <code> var config = {// TODO: सामान्य कॉन्फ़िगरेशन मॉड्यूल जोड़ें: {},}; </ code> </ pre> module{}ऑब्जेक्ट गलत है। इसकी आवश्यकता नहीं है। यह बढ़ाया जाएगा / कीवर्ड के रूप में एक ही स्तर पर विलय कर दिया name, entry, output(अपने उदाहरण से)। <pre> <कोड> {मॉड्यूल: {मोड: "विकास", devtool: "स्रोत-मानचित्र"}}, नाम: "a", प्रविष्टि: "./a/app", आउटपुट: {पथ: "/। ", फ़ाइल नाम:" बंडल.जेएस "}} </ code> </ pre>

— Rob Waa

Answer 2

वेबपैक कई आउटपुट पथ का समर्थन करता है।

प्रविष्टि कुंजी के रूप में आउटपुट पथ सेट करें। और nameआउटपुट टेम्पलेट के रूप में उपयोग करें ।

वेबपैक कॉन्फ़िगरेशन:

entry: {
    'module/a/index': 'module/a/index.js',
    'module/b/index': 'module/b/index.js',
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
}

उत्पन्न:

└── module
    ├── a
    │   └── index.js
    └── b
        └── index.js

Comments

मेरे मामले में, मैं चाहता हूं कि एक आउटपुट में चंकश न हो, क्या इसका कोई सरल समाधान है? धन्यवाद।

— रा.रा।

@zhengkenghong मुझे विश्वास है कि उत्पन्न आउटपुट पथ को इसकी आवश्यकता होगी dist। इसलिए module/a/index.jsआउटपुट पथ होने के बजाय , यह होना चाहिए module/a/dist/index.jsया फिर, आप अपनी प्रविष्टि फ़ाइलों को ओवरराइड कर रहे हैं।

— नृत्य 2

@Sung distफ़ोल्डर पहले से ही आउटपुट पथ में कॉन्फ़िगर किया गया है। तो उत्पन्न फ़ाइल वास्तव में होगी dist/module/a/index.js, जिसका मैंने उल्लेख नहीं किया था।

— zhengkenghong

मुझे लगता है कि यह स्वीकृत उत्तर होना चाहिए क्योंकि यह वेबपैक 4 डॉक्स से उत्तर है। -> webpack.js.org/concepts/output/#multiple-entry-points

— विल

@raRaRa देर पार्टी के लिए है, लेकिन आप ऐसा कर सकते हैं एक समारोह का उपयोग करके के लिए output.filename: यहाँ प्रलेखित के रूप में webpack.js.org/configuration/output/#outputfilename

— थॉमस

Answer 3

यदि आप कई आउटपुट पथों के साथ एक ही स्तर की गहराई और फ़ोल्डर संरचना के साथ रह सकते हैं, तो वेबपैक 2 में ऐसा करने का एक तरीका है (अभी तक वेबपैक 1.x के साथ परीक्षण करना है)

मूल रूप से आप डॉक्टर नियमों का पालन नहीं करते हैं और आप फ़ाइल नाम के लिए एक मार्ग प्रदान करते हैं।

module.exports = {
    entry: {
      foo: 'foo.js',
      bar: 'bar.js'
    },

    output: {
      path: path.join(__dirname, 'components'),
      filename: '[name]/dist/[name].bundle.js', // Hacky way to force webpack   to have multiple output folders vs multiple files per one path
    }
};

यह इस फ़ोल्डर संरचना को ले जाएगा

/-
  foo.js
  bar.js

और इसे चालू करें

/-
  foo.js
  bar.js
  components/foo/dist/foo.js
  components/bar/dist/bar.js

Comments

@ccnixon यह "अभी भी अनुमति दी" के लिए webpack.js.org/configuration/output/#outputfilename seach के यहाँ प्रलेखित है ।

— जॉन हेनकेल

Answer 4

मैंने एक प्लगइन लिखा है जो उम्मीद कर सकता है कि आप क्या चाहते हैं, आप ज्ञात या अज्ञात प्रवेश बिंदु ( ग्लोब का उपयोग करके ) निर्दिष्ट कर सकते हैं और सटीक आउटपुट निर्दिष्ट कर सकते हैं या प्रवेश फ़ाइल पथ और नाम का उपयोग करके गतिशील रूप से उन्हें उत्पन्न कर सकते हैं। https://www.npmjs.com/package/webpack-entry-plus

Answer 5

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

इस मामले में मैं इसके बजाय FileManagerWebpackPlugin प्लगइन का उपयोग करने की सलाह दूंगा:

const FileManagerPlugin = require('filemanager-webpack-plugin');
// ...
plugins: [
    // ...
    new FileManagerPlugin({
      onEnd: {
        copy: [{
          source: './dist/*.*',
          destination: './public/',
        }],
      },
    }),
],

Answer 6

आपके पास केवल एक आउटपुट पथ हो सकता है।

डॉक्स https://github.com/webpack/docs/wiki/configuration#output से

संकलन के आउटपुट को प्रभावित करने वाले विकल्प। आउटपुट विकल्प वेबपैक को डिस्क पर संकलित फ़ाइलों को लिखने का तरीका बताते हैं। ध्यान दें, जबकि कई प्रवेश बिंदु हो सकते हैं, केवल एक आउटपुट कॉन्फ़िगरेशन निर्दिष्ट है।

यदि आप किसी हैशिंग ([हैश] या [चंकश]] का उपयोग करते हैं, तो मॉड्यूल का एक सुसंगत क्रम सुनिश्चित करें। ऑक्यूरेंस ऑडरप्लगिन या रिकॉर्डपैथ का उपयोग करें।

Comments

धन्यवाद। मैं क्यू छोड़ रहा हूँ बस के मामले में किसी को एक समाधान के साथ आने में सक्षम हो सकता है।

— spb

2 आउटपुट पथ की आवश्यकता के लिए आपका उपयोग मामला क्या है? ऐसा लगता है कि आप 2 एप्लिकेशन या 1 एप्लिकेशन और 1 मॉड्यूल चाहते हैं।

— एक्स-ज़ैक-टली

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

— spb

यह पूरी तरह सच नहीं है। आप तकनीकी रूप से केवल एक आउटपुट पथ निर्दिष्ट कर सकते हैं, लेकिन यह एक एंट्री ऑब्जेक्ट में प्रत्येक कुंजी के लिए लागू होगा, जिससे आपको कई आउटपुट - webpack.js.org/concepts/entry-points

— sanjsanj

Answer 7

मैं वास्तव में फाइल-लोडर मॉड्यूल में सिर्फ index.js में जा रहा हूं और जहां सामग्री उत्सर्जित की गई थी, उसे बदलकर घाव कर रहा हूं। यह शायद इष्टतम समाधान नहीं है, लेकिन जब तक कोई और तरीका नहीं है, यह ठीक है क्योंकि मुझे पता है कि इस लोडर द्वारा क्या ठीक से संभाला जा रहा है, जो कि केवल फोंट है।

//index.js
var loaderUtils = require("loader-utils");
module.exports = function(content) {
    this.cacheable && this.cacheable();
    if(!this.emitFile) throw new Error("emitFile is required from module system");
    var query = loaderUtils.parseQuery(this.query);
    var url = loaderUtils.interpolateName(this, query.name || "[hash].[ext]", {
        context: query.context || this.options.context,
        content: content,
        regExp: query.regExp
    });
    this.emitFile("fonts/"+ url, content);//changed path to emit contents to "fonts" folder rather than project root
    return "module.exports = __webpack_public_path__ + " + JSON.stringify( url) + ";";
}
module.exports.raw = true;

Comments

पता है अगर यह अभी भी आप के लिए एक मुद्दा है, लेकिन npmjs.com/package/webpack-entry-plus

— sanjsanj