نقاط ورود

همانطور که در شروع کار ذکر شد، راه های متعددی برای تعریف ویژگی ورودی در پیکربندی بسته وب شما وجود دارد. ما راه هایی را به شما نشان خواهیم داد که می توانید ویژگی ورودی را پیکربندی کنید، علاوه بر توضیح اینکه چرا ممکن است برای شما مفید باشد.

نحو تک مدخلی (مخفف).

استفاده: ورودی: رشته |[رشته]

webpack. config. js

مدول.صادرات= ورود: './path/to/my/entry/file. js', >;

سینتکس تک ورودی برای ویژگی ورودی مخفف زیر است:

webpack. config. js

مدول.صادرات= ورود: اصلی: './path/to/my/entry/file. js', >, >;

همچنین می توانیم آرایه ای از مسیرهای فایل را به ویژگی ورودی ارسال کنیم که چیزی را ایجاد می کند که به عنوان "ورودی چند اصلی" شناخته می شود. این زمانی مفید است که می خواهید چندین فایل وابسته را با هم تزریق کنید و وابستگی های آنها را در یک "تکه" نمودار کنید.

webpack. config. js

مدول.صادرات= ورود: ['./src/file_1. js', './src/file_2. js'],خروجی: نام فایل: 'bundle. js', >, >;

Single Entry Syntax زمانی که به دنبال تنظیم سریع پیکربندی بسته وب برای یک برنامه یا ابزار با یک نقطه ورودی (به عنوان مثال یک کتابخانه) هستید، یک انتخاب عالی است. با این حال، انعطاف پذیری زیادی در گسترش یا مقیاس بندی پیکربندی شما با این نحو وجود ندارد.

نحو شی

webpack. config. js

مدول.صادرات= ورود: برنامه: './src/app. js',admin App: './src/adminApp. js', >, >;

نحو شیء پرمخاطب تر است. با این حال، این مقیاس پذیرترین راه برای تعریف ورودی/ورودی ها در برنامه شما است.

نکته

"پیکربندی های بسته وب مقیاس پذیر" مواردی هستند که می توانند مجددا استفاده شوند و با سایر پیکربندی های جزئی ترکیب شوند. این یک تکنیک محبوب است که برای جداسازی نگرانی ها بر اساس محیط، ساخت هدف و زمان اجرا استفاده می شود. سپس آنها با استفاده از ابزارهای تخصصی مانند webpack-merge ادغام می شوند.

نکته

می توانید شیء خالی را پاس کنید<>برای ورود زمانی که فقط نقاط ورودی تولید شده توسط افزونه ها دارید.

شیء EntryDescription

یک موضوع توصیف نقطه ورودی. می توانید ویژگی های زیر را مشخص کنید.

• dependOn: نقاط ورودی که نقطه ورودی فعلی به آنها بستگی دارد. آنها باید قبل از بارگیری این نقطه ورودی بارگیری شوند.
• filename : نام هر فایل خروجی روی دیسک را مشخص می کند.
• import: ماژول(هایی) که هنگام راه اندازی بارگذاری می شوند.
• کتابخانه : گزینه های کتابخانه را برای بسته بندی یک کتابخانه از ورودی فعلی مشخص کنید.
• runtime : نام قطعه زمان اجرا. پس از تنظیم، یک قطعه زمان اجرا جدید ایجاد خواهد شد. از وب پک 5. 43. 0 می توان آن را روی false تنظیم کرد تا از یک قطعه زمان اجرا جدید جلوگیری شود.
• publicPath : یک آدرس URL عمومی برای فایل های خروجی این ورودی زمانی که در مرورگر ارجاع می شوند، مشخص کنید. همچنین به output. publicPath مراجعه کنید.

webpack. config. js

مدول.صادرات= ورود: A2: "بسته به File. js",B2: بستگی دارد: 'A2', وارد كردن: './src/app. js', >, >, >;

Runtime and Greandon نباید در یک ورودی واحد استفاده شود ، بنابراین پیکربندی زیر نامعتبر است و خطایی را به وجود می آورد:

webpack. config. js

مدول.صادرات= ورود: A2: './آ',B2: زمان اجرا: 'x2',بستگی دارد: 'A2', وارد كردن: './b', >, >, >;

اطمینان حاصل کنید که زمان اجرا نباید به نام نقطه ورودی موجود اشاره کند ، به عنوان مثال پیکربندی زیر خطایی را به وجود می آورد:

مدول.صادرات= ورود: A1: './آ',B1: زمان اجرا: 'a1', وارد كردن: './b', >, >, >;

همچنین وابسته نباید دایره ای باشد ، مثال زیر دوباره خطایی را به وجود می آورد:

مدول.صادرات= ورود: A3:  وارد كردن: './آ',بستگی دارد: 'B3', >,B3:  وارد كردن: './b',بستگی دارد: 'A3', >, >, >;

سناریوها

در زیر لیستی از تنظیمات ورود و موارد استفاده در دنیای واقعی آنها وجود دارد:

برنامه های جداگانه برنامه و فروشنده

webpack. config. js

مدول.صادرات= ورود: اصلی: './src/app. js',فروشنده: './src/vendor. js', >, >;

webpack. prod. js

مدول.صادرات= خروجی: نام فایل: "[نام]. [ContentHash] . bundle. js ', >, >;

webpack. dev. js

مدول.صادرات= خروجی: نام فایل: '[نام] . bundle. js', >, >;

این چه کاری انجام می دهد؟ما به Webpack می گوییم که می خواهیم 2 نقطه ورود جداگانه (مانند مثال فوق).

چرا؟با این کار ، می توانید کتابخانه ها یا پرونده های مورد نیاز را که اصلاح نشده اند (به عنوان مثال بوت استرپ ، jQuery ، تصاویر و غیره) در داخل فروشنده وارد کنید. محتوای هش همچنان یکسان است ، که به مرورگر اجازه می دهد تا آنها را به طور جداگانه ذخیره کند و در نتیجه باعث کاهش زمان بار شود.

نکته

در عوض ، این گزینه به Optimization. Splitchunks از جدا کردن فروشندگان و ماژول های برنامه و ایجاد یک فایل جداگانه مراقبت می کند. برای فروشندگان یا موارد دیگر که نقطه شروع اجرای آن نیست ، ورودی ایجاد نکنید.

برنامه چند صفحه ای

webpack. config. js

مدول.صادرات= ورود: صفحه اول: './src/pageone/index. js',پیجتو: './src/pagetwo/index. js',پاپری: './src/pagetheree/index. js', >, >;

این چه کاری انجام می دهد؟ما در حال گفتن وب هستیم که می خواهیم 3 نمودار وابستگی جداگانه (مانند مثال فوق).

چرا؟در یک برنامه چند صفحه ای ، سرور قصد دارد یک سند جدید HTML را برای شما بدست آورد. این صفحه بارگیری مجدد این سند و دارایی های جدید بارگیری می شود. با این حال ، این فرصت منحصر به فرد را برای انجام کارهایی مانند استفاده از بهینه سازی به ما می دهد. برنامه های چند صفحه ای که دوباره از کد/ماژول های زیادی بین نقاط ورود استفاده می کنند ، می توانند از این تکنیک ها تا حد زیادی بهره مند شوند ، زیرا تعداد نقاط ورود افزایش می یابد.

نکته

به عنوان یک قانون شست: برای هر سند HTML دقیقاً از یک نقطه ورودی استفاده کنید. برای جزئیات بیشتر به مسئله شرح داده شده در اینجا مراجعه کنید.