प्रागितिहास

यह कोई रहस्य नहीं है कि वेबपैक 4 की रिलीज के साथ, कोड साझा करने की रणनीति बहुत बदल गई है। यह कहना बेहतर होगा कि इसका फिर से आविष्कार किया गया था, क्योंकि पुराने दृष्टिकोण ने अभी काम करना बंद कर दिया है, और नया यह स्पष्ट नहीं है कि इसका उपयोग कैसे किया जाए।

जो लोग अभी तक नहीं हैं, उनके लिए webpack.optimize.CommonsChunkPlugin प्लगइन चला गया है। निश्चित रूप से। इसके बजाय, इसे निम्नलिखित में लिखने का सुझाव दिया गया है:

module.exports = { // ... optimization: { splitChunks: { chunks: "all" } } // ... } 

वह जादू की तरह काम करना चाहिए। यानी अब हम वेबपैक को यह नहीं बताते हैं कि एक सामान्य ठग के रूप में क्या करना है, लेकिन वह खुद सब कुछ करेगा, और हमसे भी बेहतर।

और आनंद आएगा। एक चुटकुला। वास्तव में नहीं ...

बुनियादी तैयारी

यहाँ प्रलेखन से एक उदाहरण है:

 module.exports = { mode: 'development', entry: { index: './src/index.js', another: './src/another-module.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, optimization: { splitChunks: { chunks: 'all' } } }; 

असेंबली का परिणाम 3 फाइलें होगा: other.bundle.js, index.bundle.js, वेंडर ~ एक और ~ index.bundle.js

 Hash: ac2ac6042ebb4f20ee54 Version: webpack 4.7.0 Time: 316ms Asset Size Chunks Chunk Names another.bundle.js 5.95 KiB another [emitted] another index.bundle.js 5.89 KiB index [emitted] index vendors~another~index.bundle.js 547 KiB vendors~another~index [emitted] vendors~another~index Entrypoint index = vendors~another~index.bundle.js index.bundle.js Entrypoint another = vendors~another~index.bundle.js another.bundle.js [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {vendors~another~index} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~another~index} [built] [./src/another-module.js] 88 bytes {another} [built] [./src/index.js] 86 bytes {index} [built] + 1 hidden module 

अब, हमारे वेब अनुप्रयोगों को लॉन्च करने के लिए, एक मामले में, हमें विक्रेताओं को ~ एक और ~ index.bundle.js और index.bundle.js, और दूसरे विक्रेताओं ~ दूसरे ~ index.bundle.js और एक अन्य से कनेक्ट करना होगा। bundle.js।

क्या समस्या है?

समस्या नाम विक्रेताओं ~ एक और ~ सूचकांक .bundle.js है। जब तक हमारे पास तीन से कम प्रवेश बिंदु हैं, तब तक कुछ भी बुरा नहीं होता है। यहां सब कुछ तर्कसंगत लगता है - बंडल में एनपीएम मॉड्यूल होते हैं (वे भी विक्रेता हैं) और सूचकांक और अन्य के लिए सामान्य मॉड्यूल। प्रत्येक पृष्ठ पर हम 2 फ़ाइलों को शामिल करते हैं और कोई समस्या नहीं है।

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

इस समस्या को कैसे हल करें?

वेबपैक पूरा करने के बाद, हमारे पास ऐसी कोई भी फाइल नहीं है जिसमें इस बारे में जानकारी हो कि इस या उस पेज पर कौन से बंडल हैं। और किस क्रम में।

हालाँकि, आउटपुट में हम इन पंक्तियों को पा सकते हैं:

 Entrypoint index = vendors~another~index.bundle.js index.bundle.js Entrypoint another = vendors~another~index.bundle.js another.bundle.js 

वास्तव में, यह लगभग वही है जो हमें चाहिए। यानी webpack बहुत अच्छी तरह से जानता है कि प्रत्येक प्रविष्टि बिंदु के लिए बंडलों की क्या आवश्यकता है, लेकिन किसी कारण से खुद इस जानकारी को हमारे साथ साझा नहीं करना चाहता है।

घोषणा पत्र यहां हमारी मदद नहीं करता है। हाँ, हम जानते हैं कि इस तरह के एक (विक्रेताओं ~ एक और ~ index.bundle.js) बंडल है। हमें पता है कि वह कहां है। लेकिन हमें नहीं पता कि इसकी जरूरत किसको है। यानी प्रकट बेकार है।

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

 import * as webpack from "webpack"; export interface IChunkDescription { readonly id: string | number; readonly name: string; readonly files: string[]; } export interface IEntrypointsPluginOptions { readonly filename: string; readonly replacer?: (key: string, value: any) => any; readonly space?: string | number; readonly filter?: (chunk: IChunkDescription) => boolean; } export default class EntrypointsPlugin { private readonly options: IEntrypointsPluginOptions; public constructor(options: IEntrypointsPluginOptions) { this.options = Object.assign<IEntrypointsPluginOptions, IEntrypointsPluginOptions>({ filename: "entrypoints.json", replacer: null, space: null, filter: null }, options); } public apply(compiler: webpack.Compiler): void { compiler.hooks.emit.tap("entrypoints", (compilation: webpack.compilation.Compilation) => { let data = {}; let entrypoints = {}; const filter = this.options.filter; const publicPath = compilation.compiler.options.output.publicPath; for (let [key, value] of compilation.entrypoints.entries()) { const chunks: IChunkDescription[] = value.chunks.map(data => { const chunk: IChunkDescription = { id: data.id, name: data.name, files: data.files }; return filter == null || filter(chunk) ? chunk : null; }); const files = ([] as string[]).concat(...chunks.filter(c => c != null) .map(c => c.files.map(f => publicPath + f))); const js = files.filter(f => /.js/.test(f) && !/.js.map/.test(f)); const css = files.filter(f => /.css/.test(f) && !/.css.map/.test(f)); let entrypoint = {}; if (js.length) entrypoint["js"] = js; if (css.length) entrypoint["css"] = css; data[key] = entrypoint; } const json = JSON.stringify(data, this.options.replacer, this.options.space); compilation.assets[this.options.filename] = { source: () => json, size: () => json.length }; }); } } 

Webpack.config। (Ts | js) फ़ाइल में, एक नया प्लगइन जोड़ें:

 plugins: [ new EntrypointsPlugin({ filename: "entrypoints.json", space: 2 }) ] 

और परिणाम की प्रतीक्षा करें। परिणाम इस सामग्री के साथ एक entrypoint.json फ़ाइल होगी:

 { "index": { "js": ["vendors~another~index.bundle.js", "index.bundle.js"] }, "another": { "js": ["vendors~another~index.bundle.js", "another.bundle.js"] } } 

यदि अर्क-सीएसएस का उपयोग किया जाता है, तो जेएस अनुभाग के अलावा सीएसएस भी होगा।

एचटीएमएल पेज बनाते समय अंतिम चीज जो हमारे लिए बनी रहती है, वह है एंट्रीप्वाइंट.जॉसन फाइल को पढ़ना, वांछित एंट्री प्वाइंट का पता लगाना, जेएस और सीएसएस फाइलों को संबंधित सूचियों से जोड़ना।

समस्या हल हो गई

कुछ इस तरह।