1.
يوجه الإدخال حزمة الويب لاستخدام الملف كنقطة بداية لبدء التعبئة وتحليل وبناء الرسم البياني للتبعية الداخلية.
2.
يرشد الإخراج حزمة الويب إلى مكان إخراج حزم الموارد المجمعة وكيفية تسميتها.
3.
يمكن لحزمة الويب الخاصة بأداة التحميل فهم ملفات JavaScript وJSON فقط، وهي القدرة المضمنة لحزمة الويب المتوفرة خارج الصندوق. تعمل أدوات التحميل على تمكين حزمة الويب من معالجة أنواع أخرى من الملفات وتحويلها إلى وحدات صالحة يمكن استخدامها بواسطة التطبيقات وإضافتها إلى الرسم البياني للتبعية.
4.
يمكن استخدام المكونات الإضافية لتنفيذ مجموعة واسعة من المهام. تتراوح المكونات الإضافية من تحسين التغليف والضغط إلى إعادة تعريف المتغيرات في البيئة.
5.
يوجه وضع الوضع (الوضع) حزمة الويب لاستخدام تكوين الوضع المقابل.
دعنا نقدم لك مقدمة تفصيلية للمفاهيم الخمسة الأساسية لحزمة الويب.
يتم استخدام كائن الإدخال بواسطة webpack للعثور على الحزمة وبدءها وإنشائها. الإدخال هو نقطة البداية للتطبيق. ومن نقطة البداية هذه، يبدأ التطبيق في التنفيذ. إذا قمت بتمرير مصفوفة، فسيتم تنفيذ كل عنصر في المصفوفة. تشير نقطة الإدخال إلى وحدة حزمة الويب التي يجب استخدامها لبدء إنشاء الرسم البياني للتبعية الداخلية الخاصة بها. بعد الدخول إلى نقطة الإدخال، ستكتشف حزمة الويب الوحدات والمكتبات التي تعتمد عليها نقطة الإدخال (بشكل مباشر وغير مباشر).
قاعدة بسيطة: كل صفحة HTML لها نقطة بداية. تطبيق صفحة واحدة (SPA): نقطة دخول واحدة، تطبيق متعدد الصفحات (MPA): نقاط دخول متعددة.
القيمة الافتراضية هي ./src/index.js ، ولكن يمكنك تحديد نقطة (أو نقاط) إدخال مختلفة عن طريق تكوين سمة entry في تكوين حزمة الويب. على سبيل المثال:
//إدخال فردي--سلسلة Module.exports = {
الإدخال: "./path/to/my/entry/file.js"،
};
// إدخالات متعددة--صفيف Module.exports = {
الإدخال: ['./src/index.js'، './src/add.js']
};
// إدخالات متعددة--object Module.exports = {
الإدخال: {
الصفحة الرئيسية: './home.js'،
حول: "./about.js"،
جهة الاتصال: "./contact.js"
}
}; نوع قيمة الإدخال:
سلسلة: إدخال واحد، يتم تعبئته لتشكيل قطعة، وسيتم إخراج ملف حزمة واحد فقط في النهاية. الاسم الافتراضي للقطعة هو
المصفوفة الرئيسية: إدخال متعدد، سيتم إخراج جميع ملفات الإدخال فقط قم بتكوين قطعة واحدة في النهاية لإخراج ملف حزمة، ويكون اسم القطعة افتراضيًا هو main. بشكل عام، يتم استخدامه فقط في وظيفة HMR لجعل تحديث HTML الساخن
كائنًا فعالاً: يتم إخراج إدخالات متعددة، وعدد القطع بقدر وجود المفاتيح، وعدد ملفات الحزمة، وسيكون كل مفتاح (مفتاح) هو اسم القطعة. في نوع الكائن، يمكن أن تكون قيمة كل مفتاح أيضًا مصفوفة، وليس مجرد سلسلة
يرشد output الإخراج (الإخراج) حزمة الويب إلى كيفية الإخراج ومكان إخراج الحزمة والأصول والحزم الأخرى التي تقوم بحزمها أو أي شيء تم تحميله باستخدام حزمة الويب . القيمة الافتراضية لحزمة الإخراج هي ./dist/main.js ، ويتم وضع الملفات الأخرى التي تم إنشاؤها في المجلد ./dist افتراضيًا.
يمكنك تكوين هذه العمليات عن طريق تحديد حقل output في التكوين:
//webpack.config.js
مسار ثابت = يتطلب('مسار');
وحدة التصدير = {
الإدخال: "./path/to/my/entry/file.js"،
الإخراج: {
المسار: path.resolve(__dirname, 'dist')،
اسم الملف: "my-first-webpack.bundle.js"،
},
}; يمكننا إخبار حزمة الويب باسم الحزمة ومكان إنشاء الحزمة من خلال خصائص output.filename و output.path .
2.1.output.filename (اسم الملف والدليل)
يحدد هذا الخيار الدليل واسم كل حزمة إخراج. ستتم كتابة هذه الحزم في الدليل المحدد بواسطة خيار output.path .
بالنسبة لنقطة入口واحدة، سيكون اسم الملف اسمًا ثابتًا. ومع ذلك، عند إنشاء حزم متعددة من خلال نقاط دخول متعددة، أو تقسيم التعليمات البرمجية، أو المكونات الإضافية المختلفة، يجب استخدام طرق أخرى لمنح كل حزمة اسمًا فريدًا.
//إدخال واحد:
وحدة التصدير = {
//...
الإخراج: {
اسم الملف: "js/bundle.js"
}
};
// إدخالات متعددة - استخدم اسم الإدخال:
وحدة التصدير = {
//...
الإخراج: {
اسم الملف: '[اسم].bundle.js'
}
};
// إدخالات متعددة - استخدم تجزئة فريدة لإنشاء Module.exports = { في كل عملية بناء
//...
الإخراج: {
اسم الملف: '[اسم].[hash].bundle.js'
}
};
... 2.2 مسار الإخراج (دليل الملف)
يحدد مسار الإخراج دليل جميع ملفات الإخراج، وهو الدليل المشترك لجميع مخرجات الموارد المستقبلية. يجب أن يكون المسار مسارًا مطلقًا.
وحدة التصدير = {
//...
الإخراج: {
المسار: path.resolve(__dirname, 'dist/assets')
}
}; 2.3.output.publicPath (بادئة مسار الموارد المشار إليها)
يحدد publicPath بادئة المسار العام التي تقدمها جميع الموارد في ملف html. ولا يؤثر على مسار الملف الذي تم إنشاؤه، وبدلاً من ذلك، عندما يقدم ملف html موارد مختلفة، تتم إضافة publicPath كبادئة لمسار الموارد المستوردة.
مثال:
في تكوين حزمة الويب التي تم إنشاؤها بواسطة vue-cli، تكون قيمة publicPath في بيئة الإنتاج الافتراضية هي "/"، وهو الدليل الجذر للدليل الحالي.
بعد التعبئة، نفتح ملف html ونرى أن مسار المورد المقدم في ملف html هو:
كما ترون، يتم إضافة الرمز / أمام المسار. عندما نفتح المتصفح للوصول إلى ملف html الذي تم إنشاؤه، سنجد خطأ لا يمكن الوصول إلى المورد ويتم الإبلاغ عن تقرير 404 في هذا الوقت، يكون الوصول إلى المورد مشابهًا لما يلي:
قد يكون كما يلي على الخادم، ولكن قد تكون هناك مشاكل في الوصول إليه.
يمكننا تغيير publicPath إلى مسار نسبي، أو التعليق عليه مباشرةً.
2.3.1. يحدد الفرق بين المسار والمسار العام
打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。2.4.output.chunkFilename (اسم القطعة غير المدخلة)
يحددput.chunkFilename اسم ملف القطعة غير الإدخال. أي أنه بالإضافة إلى القطع التي تم إنشاؤها بواسطة ملف الإدخال، تتم تسمية ملفات القطع التي تم إنشاؤها بواسطة ملفات أخرى.
وحدة التصدير = {
//...
الإخراج: {
ChunkFilename: 'js/[name]_chunk.js' // اسم القطعة غير المدخلة}
}; webpack حزم ملفات JavaScript وJSON فقط (يحتوي webpack3+和webpack2+ على معالجة مدمجة لملفات JSON، لكن webpack1+并不支持， إلى تقديم json-loader ). حزمة الويب متاحة خارج الصندوق. لا يدعم Webpack في حد ذاته تعبئة أنواع أخرى من الملفات، مثل CSS وVue وما إلى ذلك، ولكن يمكننا استخدام أدوات تحميل مختلفة للسماح لحزمة الويب بمعالجة هذه الأنواع من الملفات. يمكن للمحمل تحويل الملفات من لغات مختلفة (مثل TypeScript) إلى JavaScript أو تحويل الصور المضمنة إلى عناوين URL للبيانات، كما يسمح لك المُحمل import ملفات CSS مباشرة في وحدات JavaScript!
باستخدام loader مختلفة، تتمتع webpack بالقدرة على استدعاء البرامج النصية أو الأدوات الخارجية لمعالجة الملفات بتنسيقات مختلفة، مثل تحليل وتحويل scss إلى css، أو تحويل ملفات JS من الجيل التالي (ES6، ES7) إلى ملفات JS المتوافقة مع المتصفحات الحديثة. لتطوير React، يمكن لبرامج التحميل المناسبة تحويل ملفات JSX المستخدمة في React إلى ملفات JS.
في تكوين حزمة الويب، يحتوي المُحمل على سمتين:
سمة test ، التي تحدد الملفات التي سيتم تحويلها.
تحدد سمة use المُحمل الذي يجب استخدامه عند إجراء التحويل.
include/exclude（可选）： إضافة الملفات (المجلدات) التي يجب معالجتها يدويًا أو حظر الملفات (المجلدات) التي لا تحتاج إلى معالجة
query（可选） : توفير خيارات إعداد إضافية للتحميل
// مثال: webpack.config js
مسار ثابت = يتطلب('مسار');
وحدة التصدير = {
الإخراج: {
اسم الملف: "my-first-webpack.bundle.js"،
},
الوحدة النمطية: {
قواعد: [
{ اختبار: /.txt$/، المحمل: 'المحمل الأولي' }،
{ test: /.css$/, use: ['style-loader', 'css-loader'] } // إذا كنت تستخدم أدوات تحميل متعددة، فيجب عليك استخدام use
]،
},
}; في التكوين أعلاه، تم تحديد سمة rules لكائن وحدة نمطية منفصل، والذي يحتوي على سمتين مطلوبتين: test use . وهذا يعادل إخبار مترجم حزمة الويب أنه عندما يواجه مسارًا تم تحليله كـ ".txt" في عبارة require() / import ، استخدم raw-loader لتحويله قبل تعبئته.
إذا كنت تستخدم أدوات تحميل متعددة، فيجب عليك استخدام use. يتم تنفيذ أدوات التحميل الموجودة في مصفوفة الاستخدام بالترتيب: من اليمين إلى اليسار، بالتسلسل. على سبيل المثال، في ملف CSS أعلاه، سيقوم محمل CSS الأول بتجميع ملف CSS إلى JS وتحميله في ملف JS، ثم سيقوم محمل النمط بإنشاء علامة نمط وإدراج موارد النمط في JS في علامة الرأس.
3.1. يوفر Webpack أداة تحميل CSS
أداتين لمعالجة أوراق الأنماط، css-loader style-loader ، وهما يتعاملان مع مهام مختلفة. يمكّنك css-loader من تقديم ملفات css باستخدام طريقة مشابهة لطريقة import . يضيف style-loader جميع الأنماط المحسوبة إلى الصفحة، ويتيح لك الجمع بين الاثنين تضمين أوراق الأنماط في ملفات JS المجمعة بواسطة حزمة الويب يمكن إدخال الملف في ملف JS.
// تثبيت npm install --save-dev style-loader css-loader // إذا كان إصدار أداة تحميل css مرتفعًا جدًا، فقد يحدث خطأ في التجميع، فمن المستحسن تقليل الإصدار المتاح مثل [email protected]
// استخدم الوحدة النمطية للتصدير = {
...
الوحدة النمطية: {
قواعد: [
{
الاختبار: /(.jsx|.js)$/،
يستخدم: {
محمل: "محمل بابل"
},
استبعاد: /node_modules/
},
{
الاختبار: /.css$/, // كيفية إدخال أدوات تحميل متعددة لنفس الملف. ترتيب عمل أدوات التحميل هو أن أدوات التحميل اللاحقة تبدأ في العمل أولاً باستخدام: [
{
محمل: "محمل النمط"
}، {
المحمل: "محمل CSS"
}
]
}
]
}
}; افترض أن هناك ملف main.css:
body {
الخلفية: أخضر؛
} لكي تتمكن حزمة الويب من العثور على ملف "main.css"، نقوم باستيراده إلى "main.js"، كما يلي:
//main.js
استيراد رد فعل من "رد فعل"؛
استيراد {render} من "react-dom"؛
استيراد الترحيب من "./Greeter"؛
import './main.css';// استخدم الحاجة لاستيراد ملف css render(<Greeter />, document.getElementById('root')); عادةً، سيتم تجميع css في نفس الملف مثل js، وليس Will يتم تعبئتها كملف CSS منفصل. ومع ذلك، مع حزمة الويب ذات التكوين المناسب، يمكنك أيضًا تجميع CSS في ملفات منفصلة.
لتحويل أنواع معينة من الوحدات، بينما يمكن استخدام المكونات الإضافية لتنفيذ نطاق أوسع من المهام، بما في ذلك: تحسين التغليف، والضغط، وإدارة الموارد، وإدخال متغيرات البيئة، وما إلى ذلك. الغرض من المكون الإضافي هو حل المشكلات الأخرى التي لا يستطيع المُحمل تحقيقها.
لاستخدام مكون إضافي، نحتاج إلى تثبيته عبر npm ثم إضافة مثيل للمكون الإضافي ضمن خاصية plugins. نظرًا لأن المكونات الإضافية يمكن أن تحمل معلمات/خيارات، فيجب عليك تمرير المثيل new إلى خاصية plugins في تكوين حزمة الويب. يمكن تخصيص معظم المكونات الإضافية من خلال الخيارات، ويمكنك استخدام نفس المكون الإضافي عدة مرات لأغراض مختلفة في ملف التكوين.
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // التثبيت عبر npm const webpack = require('webpack'); // يستخدم للوصول إلى المكونات الإضافية المضمنة Module.exports = {
الوحدة النمطية: {
القواعد: [{ test: /.txt$/, use: 'raw-loader' }],
},
المكونات الإضافية: [new HtmlWebpackPlugin({ template: './src/index.html' })]،
}; في المثال أعلاه، يقوم html-webpack-plugin بإنشاء ملف HTML للتطبيق ويقوم تلقائيًا بإدخال جميع الحزم التي تم إنشاؤها.
4.1. البرنامج الإضافي BannerPlugin (إضافة بيان حقوق الطبع والنشر)
لقد أضفنا أدناه مكونًا إضافيًا يضيف بيان حقوق الطبع والنشر إلى التعليمات البرمجية المعبأة. هذا المكون الإضافي عبارة عن مكون إضافي مضمن في حزمة الويب ولا يحتاج إلى التثبيت.
const webpack = require('webpack');
وحدة التصدير = {
...
الوحدة النمطية: {
قواعد: [
{
الاختبار: /(.jsx|.js)$/،
يستخدم: {
محمل: "محمل بابل"
},
استبعاد: /node_modules/
},
{
الاختبار: /.css$/،
يستخدم: [
{
محمل: "محمل النمط"
}، {
المحمل: "محمل CSS"،
خيارات: {
وحدات: صحيح
}
}، {
المحمل: "محمل postcss"
}
]
}
]
},
الإضافات: [
new webpack.BannerPlugin('جميع الحقوق محفوظة لـ Wenxuehai، سيتم التحقيق في أي إعادة إنتاج')
]،
}; 4.2. المكون الإضافي لاستبدال الوحدة الساخنة (التحميل السريع)
يعد Hot Module Replacement (HMR) مكونًا إضافيًا مفيدًا للغاية في حزمة الويب، فهو يسمح لك بتحديث التأثير المعدل ومعاينته تلقائيًا في الوقت الفعلي بعد تعديل كود المكون. يختلف التحميل السريع عن webpack-dev-server عند تشغيل التطبيق، يمكن للاستبدال السريع عرض تأثير تحديثات التعليمات البرمجية دون تحديث الصفحة، تمامًا مثل تعديل نمط dom مباشرة على المتصفح، بينما يتطلب webpack-dev-server التحديث. الصفحة.
(1) أضف مكون HMR الإضافي إلى ملف تكوين حزمة الويب؛
(2) أضف المعلمة "الساخنة" إلى خادم Webpack Dev
4.2.1. تنفذ React التحميل السريع
. يمكن لوحدات React استخدام Babel لتنفيذ التحميل السريع للوظائف . يحتوي Babel على مكون إضافي يسمى react-transform-hrm ، والذي يسمح لـ HMR بالعمل بشكل صحيح دون تكوين إضافي لوحدة React
تثبيت react-transform-hmr
npm تثبيت --save-dev babel-plugin-react-transform رد فعل -تحويل؛ -hmr
const webpack = require('webpack');
وحدة التصدير = {
الإدخال: __dirname + "/app/main.js"،// ملف الإدخال الوحيد الذي تم ذكره عدة مرات الإخراج: {
المسار: __dirname + "/public"،
اسم الملف: "bundle.js"
},
أداة التطوير: "خريطة مصدر التقييم"،
خادم التطوير: {
contentBase: "./public"،// الدليل الذي توجد به الصفحة التي تم تحميلها بواسطة الخادم المحلي HistoryApiFallback: true،// لا تقفز إلى السطر: true،
حار: صحيح
},
الوحدة النمطية: {
قواعد: [
{
الاختبار: /(.jsx|.js)$/،
يستخدم: {
محمل: "محمل بابل"
},
استبعاد: /node_modules/
},
{
الاختبار: /.css$/،
يستخدم: [
{
محمل: "محمل النمط"
}، {
المحمل: "محمل CSS"،
خيارات: {
وحدات: صحيح
}
}، {
المحمل: "محمل postcss"
}
]
}
]
},
الإضافات: [
new webpack.BannerPlugin('حقوق النشر، سيتم التحقيق في أي نسخ')،
new webpack.HotModuleReplacementPlugin() // المكون الإضافي لإعادة التحميل السريع]،
}; تكوين بابل
// .babelrc
{
"الإعدادات المسبقة": ["react"، "env"]،
"بيئة": {
"تطوير": {
"المكونات الإضافية": [["تحويل التفاعل"، {
"التحويلات": [{
"تحويل": "رد فعل-تحويل-hmr"،
"الواردات": ["رد فعل"]،
"المحليين": ["الوحدة النمطية"]
}]
}]]
}
}
} //مرحبًا،js
رد فعل الاستيراد، {
عنصر
} من "رد فعل"
استيراد الأنماط من "./main.css"
فئة الترحيب يمتد المكون {
يجعل() {
يعود (
<ديف>
<ح1>
aaaf
</h1>
</div>
);
}
}
تصدير الترحيب الافتراضي //main.js
استيراد رد فعل من "رد فعل"؛
يستورد {
يجعل
} من 'react-dom';
استيراد Greeter من "./greeter.js"؛
render( < Greeter / > , document.getElementById('root')); الآن إذا تمكنا من تنفيذ وحدة التحميل السريع، فيمكننا رؤية المحتوى المحدث مباشرة على المتصفح في كل مرة نقوم فيها بالحفظ، ولا يحتاج المتصفح إلى التحديث. تحديث تلقائيا.
(في بعض الأحيان لا يوجد أي تأثير، قد يكون هناك مشكلة في الإصدار)
4.3. ExtractTextWebpackPlugin (استخراج CSS)
افتراضيًا، لن تتعامل حزمة الويب مع نمط CSS كملف مستقل، ولكنها ستحزم أيضًا ملف CSS في ملف JS. وحزم ما تم إنشاؤه عند عرض ملف js، سيتم إدراج النمط في الصفحة في شكل علامة نمط من خلال بناء جملة js. ولكن في هذه الحالة، قد يكون ملف الحزمة المعبأ كبيرًا جدًا في هذا الوقت، يمكننا استخدام البرنامج الإضافي ExtractTextWebpackPlugin لفصل نمط CSS إلى ملف CSS.
سيعمل المكون الإضافي ExtractTextWebpackPlugin على نقل ملف *.css المشار إليه في مجموعة الإدخال (بما في ذلك ملف css المستورد والنمط المكتوب في ملف vue) إلى ملف CSS مستقل ومنفصل. سيقوم ExtractTextPlugin بإنشاء ملف CSS مطابق لكل مجموعة إدخال، مما يعني أن إدخالًا واحدًا يتوافق مع ملف CSS. إذا كانت هناك إدخالات متعددة، فسيتم إنشاء ملفات CSS متعددة مقابلة على التوالي.
باستخدام المكون الإضافي ExtractTextWebpackPlugin، لن يتم تضمين أنماطك بعد الآن في حزمة JS، ولكن سيتم وضعها في ملف CSS منفصل (على سبيل المثال، styles.css ). إذا كانت ملفات النمط الخاصة بك أكبر حجمًا، فسيؤدي ذلك إلى جعل التحميل المبكر أسرع لأنه سيتم تحميل حزمة CSS بالتوازي مع حزمة JS.
const ExtractTextPlugin = require("extract-text-webpack-plugin");
وحدة التصدير = {
الوحدة النمطية: {
قواعد: [
{
الاختبار: /.css$/،
الاستخدام: ExtractTextPlugin.extract({
البديل: "محمل النمط"،
الاستخدام: "محمل CSS"
})
}
]
},
الإضافات: [
جديد ExtractTextPlugin({
اسم الملف: utils.assetsPath('css/[name].[contenthash].css')، // ينشئ ExtractTextPlugin ملفًا مطابقًا لكل مجموعة إدخال، لذا عند تكوين مجموعات إدخال متعددة، يجب عليك استخدام [ name]، [id ] أو [محتوى]
// allChunks: true، // عند استخدام `CommonsChunkPlugin` وهناك قطع مستخرجة (من `ExtractTextPlugin.extract`) في القطعة المشتركة، يجب ضبط `allChunks` ** على `true`.
})،
]
} 4.3.1 خيار allChunks (ما إذا كان سيتم أيضًا استخراج الأنماط المحملة بشكل غير متزامن معًا)
القيمة الافتراضية لخيار allChunks الخاص بالمكون الإضافي ExtractTextWebpackPlugin غير صحيحة.
يعني خيار allChunks ما إذا كان يجب استخراج الأنماط المحملة بشكل غير متزامن معًا. لأنه افتراضيًا، حتى إذا تم استخدام البرنامج الإضافي ExtractTextWebpackPlugin، إذا تم تحميل النمط أو ملف النمط بشكل غير متزامن، فلن يتم استخراج هذه الأنماط في ملفات CSS مستقلة، ولكن سيتم تعبئتها في ملفات JS.
لذلك، allChunks:false هي القيمة الافتراضية. القيمة الافتراضية هي استخراج التعليمات البرمجية من الإدخال، ولكن لن يتم استخراج التعليمات البرمجية المحملة بشكل غير متزامن؛ allChunks:true هو استخراج التعليمات البرمجية لجميع الوحدات (بما في ذلك الوحدات المحملة بشكل غير متزامن) إلى ملف. إذا تم استخدام التحميل غير المتزامن للأنماط، ولكن تم تعيين allChunks على خطأ، فسنحتاج إلى تعيين البديل لـ ExtractTextPlugin.extract، fallback هو استخدام style-loader للتحميل بشكل غير متزامن عندما لا يتم تحميل كود CSS بواسطة الكود غير المتزامن. تم استخراج نمط المكون.
يرجى الرجوع إلى:
https://github.com/sevenCon/blog-github/blob/master/articles/webpack ملاحظات الدراسة (2) - استخدام ExtractTextWebpackPlugin.md
https://blog.csdn.net/weixin_41134409/article/ التفاصيل /88416356
من خلال تحديد أحد development أو production أو none لتعيين معلمة mode ، يمكنك تمكين تحسين حزمة الويب المضمنة في البيئة المقابلة. قيمته الافتراضية هي production .
وحدة التصدير = {
الوضع: "الإنتاج"،
}; سيؤدي تكوين خيار الوضع مباشرة في ملف التكوين إلى إخبار حزمة الويب باستخدام التحسين المضمن للوضع المقابل. تتضمن خيارات الوضع التطوير والإنتاج ولا شيء.
التطوير: في وضع التطوير، لن يتم ضغط التعليمات البرمجية المعبأة، ويتم تمكين تصحيح أخطاء التعليمات البرمجية.
الإنتاج: وضع الإنتاج، بالعكس تمامًا.
اضبط الوضع على التطوير أو الإنتاج، وسيقوم webpack تلقائيًا بتعيين قيمة العملية.env.NODE_ENV يمكننا الحصول على هذه القيمة مباشرة في أي مجلد. ولكن إذا قمت فقط بضبط NODE_ENV ، فلن يتم ضبط mode تلقائيًا. (في العقدة، تمثل عملية المتغير الشامل عملية العقدة الحالية. تحتوي سمة العملية.env على معلومات بيئة المستخدم. السمة NODE_ENV غير موجودة في العملية.env نفسها. نحن بشكل عام نحدد سمة NODE_ENV بأنفسنا ونستخدمها لتحديد ما إذا كانت هي بيئة إنتاج أو بيئة تطوير)
(يرجى ملاحظة: خيار الوضع جديد في webpack4. قبل 4، تم تعيينه باستخدام البرنامج الإضافي DefinePlugin. قام Webpack4 بحذف DefinePlugin)
5.1 تكوين الوضع لمشروع vue-cli تم شرحه بالتفصيل
في حزمة الويب. بشكل عام، سيتم تكوين قيمة NODE_ENV في ملف التكوين. في مشروع vue الذي تم إنشاؤه افتراضيًا باستخدام vue-cli، يكون تكوين NODE_ENV كما يلي:
// ضمن ملف webpack.dev.conf.js، يتم تقديم ملف dev.env.js new webpack.DefinePlugin({
'process.env': يتطلب ('../config/dev.env')
})، //module.exports = merge(prodEnv, { في ملف dev.env.js
NODE_ENV: ''"تطوير"'"
}) // ضمن ملف webpack.prod.conf.js، يتم تقديم ملف prod.env.js const env = require('../config/prod.env')
حزمة الويب الجديدة.DefinePlugin({
'process.env': env
})، //module.exports = { في ملف prod.env.js
NODE_ENV: ''"الإنتاج""
} كما ترى مما سبق، في بيئة التطوير، يقوم ملف التكوين بتكوين NODE_ENV إلى "تطوير"؛ وفي بيئة الإنتاج، يقوم ملف التكوين بتكوين NODE_ENV إلى "إنتاج".
عندما نقوم بتشغيل المشروع، سنقوم بتنفيذ npm run dev أو npm run build. يستخدم هذان الأمران ملف التكوين الخاص ببيئة التطوير أو بيئة الإنتاج لإنشاء المشروع قيد التشغيل، وبالتالي تكوين قيمة NODE_ENV المقابلة. يمكن الحصول على قيمة NODE_ENV المقابلة في أي ملف من ملفات المشروع (ليس بالضرورة ملف التكوين، لأنه يعتمد على ما إذا كان ملف التكوين الذي تم تكوينه باستخدام قيمة NODE_ENV قد أصبح ساري المفعول).
5.2. تعد عملية التكوين Process.env.NODE_ENV
متغيرًا عامًا للعقدة، وتحتوي العملية على السمة env، ولكنها لا تحتوي على السمة NODE_ENV. المتغير NODE_ENV غير متاح مباشرة فيprocess.env، ولكن يتم الحصول عليه عن طريق تعيينه، ومع ذلك، يتم استخدام المتغير NODE_ENV عادةً لتحديد نوع البيئة. ووظيفة هذا المتغير هي: أنه يمكننا تمييز بيئة التطوير أو بيئة الإنتاج من خلال الحكم على هذا المتغير.
(1) يمكن تعيين قيم المتغيرات العامة من خلال البرنامج المساعد المدمج في حزمة الويب DefinePlugin:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})، بعد الإعداد، يمكنك الحصول على هذه القيمة في البرنامج النصي للتنفيذ، على سبيل المثال:
// main.js console.log(process.env.NODE_ENV); //production
لكن لا يمكن الحصول على هذه القيمة في ملف تكوين حزمة الويب webpack.config.js.
(2) قم أولاً بتنزيل حزمة cross-env من خلال
إعداد حزمة cross-env:
cnpm i cross-env -D
قم بتعيين ملف package.json:
"build": "cross-env NODE_ENV=test webpack --config webpack.config .js"
في هذا الوقت، يمكن الحصول على القيمة (process.env.NODE_ENV) في ملف التكوين، ولكن لا يمكن الحصول عليها في البرنامج النصي القابل للتنفيذ. ويجب استخدامها مع المكون الإضافي DefinePlugin.