الإخراج: يمكن أن يؤدي تكوين خيار الإخراج إلى التحكم في كيفية كتابة حزمة الويب للملفات المجمعة على القرص الثابت. لاحظ أنه على الرغم من إمكانية وجود نقاط دخول متعددة ، إلا أنه يتم تحديد تكوين مخرجات واحد فقط.
نقوم أولاً بتهيئة المشروع npm init ، وتثبيت webpack و webpack-cli محليًا، ثم إنشاء مجلدات index.html و webpack.config.js و src في الدليل الجذر، وإنشاء main.js في المجلد كملف الإدخال
وبعد الانتهاء من أعمال التحضير يكون كما هو موضح في الشكل:
main.js
وظيفة المكون () {
فار div=document.createElement('div')
div.innerHTML="دعونا نتعلم تكوين التصدير معًا~"
شعبة العودة
}
document.body.appendChild(Component()) Index.html
<body>
<script src="./dist/bundle.js"></script>
</body> packag.json
"البرامج النصية": {
"test": "صدى "خطأ: لم يتم تحديد اختبار" && خروج 1"،
"build": "webpack" // أضف }، ثم جزء التكوين webpack.config.js
يمكن أن يؤدي تكوين خيار output إلى التحكم في كيفية كتابة حزمة الويب للملفات المجمعة على القرص الثابت.
لاحظ أنه حتى إذا كان من الممكن أن يكون هناك نقاط入口متعددة، فسيتم تحديد تكوين输出واحد فقط.
فيما يلي عدة مفاهيم لتكوين الإخراج:
1.
يحدد مسار المسار موقع مخرجات المورد، ويجب أن تكون القيمة المطلوبة مسارًا مطلقًا ، مثل. :
المسار الثابت = يتطلب (' المسار')
الوحدة النمطية.الصادرات={
الإدخال: "./src/main.js"،
الإخراج:{
اسم الملف: 'bundle.js'،
// قم بتعيين موقع إخراج المورد على مسار دليل التوزيع للمشروع: path.resolve(__dirname, 'dist')
},
} بعد Webpack 4، تم تحويل مسار الإخراج إلى دليل dist بشكل افتراضي . ما لم نكن بحاجة إلى تغييره، ليست هناك حاجة لتكوينه بشكل منفصل، لذلك إذا كان webpack4 أو أعلى، يمكنك كتابة:
Module.exports={
الإدخال: "./src/main.js"،
الإخراج:{
اسم الملف: 'bundle.js'،
},
} 2. اسم الملف
وظيفة اسم الملف هي التحكم في اسم الملف لمورد الإخراج ، والذي يكون على شكل سلسلة. هنا أطلق عليه اسم bundle.js ، مما يعني أنني أريد إخراج الموارد في ملف يسمى Bundle.js:
Module.exports={
الإدخال: "./src/main.js"،
الإخراج:{
اسم الملف: 'bundle.js'،
},
} بعد التعبئة، كما هو موضح في الشكل، سيتم إنشاء مجلد dist تلقائيًا وبداخله ملف bundle.js .
لا يمكن أن يكون اسم الملف هو اسم الحزمة فحسب، بل هو أيضًا مسار نسبي،
ولا يهم إذا كان الدليل الموجود في المسار غير موجود، فسيقوم Webpack بإنشاء الدليل عند إخراج الموارد، على سبيل المثال:
Module.exports = {.
الإخراج: {
اسم الملف: "./js/bundle.js"،
},
}; كما هو موضح في الصورة بعد التغليف:
في سيناريو الإدخال المتعدد ، نحتاج إلى تحديد اسم مختلف لكل حزمة يتم إنشاؤها. يدعم Webpack استخدام نموذج يشبه لغة القالب لإنشاء أسماء الملفات ديناميكيًا .
قبل ذلك، قمنا بإنشاء ملف إدخال جديد في src
.
مكون الوظيفة () {
فار div=document.createElement('div')
div.innerHTML="أنا ملف الإدخال الثاني"
شعبة العودة
}
document.body.appendChild(Component()) webpack.config.js:
Module.exports = {
دخول:{
الرئيسي:'./src/main.js'،
البائع:'./src/vender.js'
},
الإخراج: {
اسم الملف: '[اسم].js'،
},
}; كما هو موضح في الصورة بعد التغليف:
سيتم استبدال [name] في اسم الملف باسم القطعة، أي الرئيسي والبائع. لذلك، سيتم إنشاء vendor.js و main.js في النهاية
. إذا كنت تريد رؤية المحتوى، فأنت بحاجة إلى تغيير المحتوى في index.html ومطابقة المسار مع الحزمة الأخيرة
<body>.
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [سؤال] ستكون هناك حاجة في هذا الوقت، كيف يمكننا أن نجعل
index.htmlيضيف لنا الحزمة التي تم إنشاؤها تلقائيًا؟ يمكن استخدام البرنامج الإضافي HtmlWebpackPlugin هنا. انظر أدناه للحصول على التفاصيل
3.
بالإضافة إلى [name] الذي يمكن أن يشير إلى اسم المجموعة، هناك العديد من متغيرات القالب الأخرى التي يمكن استخدامها في تكوين اسم الملف:
يمكن
[hash] و [chunkhash] المرتبطة بشكل مباشر بمحتوى القطعة، إذا تم استخدامها في اسم الملف، فعندما يتغير محتوى القطعة، يمكن أن يتسبب ذلك أيضًا في تغيير اسم ملف المورد أن المستخدم سيقوم فورًا بتنزيل الإصدار الجديد في المرة التالية التي يطلب فيها ملف المورد دون استخدام ذاكرة التخزين المؤقت المحلية.
يمكن أن يكون لـ [query] أيضًا تأثير مماثل، لكن لا علاقة له بمحتوى القطعة ويجب تحديده يدويًا بواسطة المطور.
4. publicPath
publicPath هو عنصر تكوين مهم جدًا، يُستخدم لتحديد موقع طلب الموارد.
خذصور
التحميل كمثال.
مكون الوظيفة () {
//...
var img = new Image();
myyebo.src = Img // طلب عنوان url
//...
} {
//...
استفسار: {
الاسم: '[الاسم].[ملحق]'،
مسار الإخراج: "ثابت/img/"،
المسار العام: './dist/static/img/'
}
} كما هو موضح في المثال أعلاه، عنوان طلب الصورة الأصلي هو ./img.jpg ، ولكن بعد إضافة publicPath إلى التكوين، يصبح المسار الفعلي ./dist/static/img/img.jpg ، لذلك يمكن الحصول على الصور من الموارد المعبأة
هناك 3 أشكال من publicPath:
ذات صلة بـ HTML،
يمكننا تحديد publicPath كمسار نسبي لـ HTML. عند طلب هذه الموارد، سيتم إضافة مسار HTML للصفحة الحالية إلى المسار النسبي لتشكيل عنوان URL للطلب الفعلي
// افترض أن عنوان html الحالي هو: https://www.example.com/app/index.html // المورد الذي تم تحميله بشكل غير متزامن يسمى 1.chunk.js publicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
مرتبط بالمضيف
إذا كانت قيمة publicPath تبدأ بـ "/"، فهذا يعني أن publicPath في تبدأ هذه المرة بـ اسم المضيف للصفحة الحالية هو المسار الأساسي
// افترض أن عنوان html الحالي هو: https://www.example.com/app/index.html // المورد الذي تم تحميله بشكل غير متزامن يسمى 1.chunk.js publicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
CDN المتعلقان
بالمسارين المذكورين أعلاه يمكننا أيضًا استخدام المسار المطلق لتكوين
publicPath يحدث الموقف بشكل عام عندما يتم وضع موارد ثابتة على CDN نظرًا لأن اسم المجال الخاص به غير متوافق مع اسم مجال الصفحة الحالية، فيجب تحديده في شكل مسار مطلق
عندما يبدأ publicPath في شكل رأس بروتوكول أو قريب البروتوكول، فهذا يعني أن المسار الحالي مرتبط بـ CDN
// افترض أن عنوان html الحالي هو: https://www.example.com/app/index.html // المورد الذي تم تحميله بشكل غير متزامن يسمى 1.chunk.js publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->
1. مدخل واحد
الحد الأدنى لتكوين سمة output في حزمة الويب هو تعيين قيمتها إلى كائن، بما في ذلك النقطتين التاليتين:
filename هو اسم ملف ملف الإخراج.path دليل الإخراج الهدفModule.exports={
الإدخال: "./src/main.js"،
الإخراج:{
اسم الملف: 'bundle.js'،
},
}
// بعد حزمة الويب 4، سيتم إنشاء التوزيعة بشكل افتراضي، لذلك يتم حذف المسار هنا 2.
إذا أنشأ التكوين عدة "أجزاء" منفصلة، فيجب عليك استخدام العناصر النائبة للتأكد من أن كل ملف له اسم
فريد يتم استخدامه هنا. [name] اسم الملف المذكور.
بالإضافة إلى ذلك، إذا كنت تريد وضع هذه الموارد في المجلد المحدد، فيمكنك إضافة تكوين path
.
الإدخال: {
الرئيسي: "./src/main.js"،
البائع: './src/vender.js'
},
الإخراج: {
اسم الملف: '[اسم].js'،
المسار: __dirname + '/dist/assets' // حدد وضع الحزمة المعبأة في الدليل /dist/assets}
}
// الإنشاء بعد التغليف: ./dist/assets/main.js, ./dist/assets/vender.js يمكن حل المشكلات المتبقية المذكورة أعلاه في هذا الفصل باستخدام المكون الإضافي HtmlWebpackPlugin
قم بتثبيت المكون الإضافي
npm install --save-dev html-webpack-plugin
وقم بتكوين المكون الإضافي
const HtmlWebpackPlugin=require('html-webpack-plugin') // تحميل الوحدة Module.exports = {
دخول:{
الرئيسي:'./src/main.js'،
البائع:'./src/vender.js'
},
// إضافة الإضافات الإضافات:[
جديد HtmlWebpackPlugin({
العنوان: إدارة المخرجات
})
]،
الإخراج: {
اسم الملف: '[اسم].js'،
},
}; بعد اكتمال التعبئة
، ستجد ملف index.html جديد يظهر في التوزيعة، والذي يضيف لنا تلقائيًا الموارد التي تم إنشاؤها. بعد الفتح، ستجد أن المتصفح سيعرض المحتوى.
هذا يعني أنك لا تحتاج إلى كتابة index.html عند تهيئة المشروع في المستقبل،
ويمكن الحصول على الكود المصدري هنا:
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/. ملفات