स्रोत कोड और डेमो के लिए संगठन

Question

मैं एक जावास्क्रिप्ट लाइब्रेरी (repository here) पर काम कर रहा हूं और इसमें lib/ निर्देशिका के अंदर स्रोत कोड और निर्देशिका के अंदर कुछ डेमो/उदाहरण demos/ शामिल हैं। वे (क्योंकि मैं ECMAScript 6 उपयोग कर रहा हूँ) कोलाहल के माध्यम से जाना है के रूप में दोनों क़ौम के साथ ही पुस्तकालय की पूरी स्रोत कोड के कुछ जाना चाहिए Webpack के माध्यम से।

हालांकि, मुझे यकीन नहीं है कि मेरे पास डेमो और स्रोत कोड दोनों के लिए केवल वेबपैक कॉन्फ़िगरेशन फ़ाइल होनी चाहिए क्योंकि इस तरह से मुझे नहीं लगता कि मैं अपनी लाइब्रेरी आउटपुट को एक ही जावास्क्रिप्ट फ़ाइल बना सकता हूं। क्योंकि पुस्तकालय में ही कई फ़ाइलों से बना है, यह विभिन्न प्रवेश बिंदुओं (स्प्राइट, SpriteList और खेल) है। ये तो एक आउटपुट फाइलों पर डाल करने के लिए और उन्हें मर्ज करने के लिए मैं करना चाहते हैं। मुझे पता है कि मैं इस लक्ष्य को हासिल करने के लिए दोनों Webpack और Gulp उपयोग कर सकते हैं, लेकिन मुझे यकीन है कि अगर यह सही तरीका नहीं है नहीं कर रहा हूँ।

संक्षेप में, जो मैं खोज रहा हूं वह मेरी बिल्ड कॉन्फ़िगरेशन (एक वेबपैक फ़ाइल बनाम दो वेबपैक फाइलें, दूसरा वाला demos/ निर्देशिका के अंदर) और वेबपैक बनाम वेबपैक + गल्प के आयोजन के लिए सबसे अच्छा विकल्प है।

आदर्श रूप में, हालांकि, मैं बस मेरी विन्यास फाइल tweak हूं और मैं केवल Webpack का उपयोग कर मेरे पुस्तकालय उत्पादन के लिए एक एकल फाइल उत्पन्न करने में सक्षम हो सकता है, लेकिन मुझे लगता है कि संभव है नहीं लगता।

import path from 'path'; 

export default { 
    entry: { 
    Sprite: "./lib/Sprite.js", 
    SpriteList: "./lib/SpriteList.js", 
    Game: "./lib/Game.js", 

    HelicopterDemo: "./demos/helicopter_game/PlayState.js", 
    CircleExample: "./demos/circle_example/PlayState.js" 
    }, 

    output: { 
    path: __dirname, 
    filename: "./build/[name].js", 
    library: ["Pentagine", "[name]"], 
    libraryTarget: "umd" 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     } 
    ] 
    }, 

    resolve: { 
    root: [ 
     path.resolve('./lib/') 
    ] 
    }, 

    externals: { 
    "underscore": "underscore" 
    } 
}; 

Answer 1

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

विन्यास फाइल इस प्रकार है main.js:

require('./lib/Sprite.js'); 
require('./lib/SpriteList.js); 
require('./lib/Game.js'); 

तो आप इसे webpack config में मुख्य प्रवेश बिंदु के रूप में उपयोग कर सकते हैं:

entry: { 
    Main: "./main.js", 
    HelicopterDemo: "./demos/helicopter_game/PlayState.js", 
    CircleExample: "./demos/circle_example/PlayState.js" 
}