تهيئة Webpack المخصصة
من الجيد معرفة: التغييرات على تهيئة webpack لا تخضع لـ semver لذا تابع على مسؤوليتك الخاصة
قبل الاستمرار في إضافة تهيئة webpack مخصصة لتطبيقك، تأكد من أن Next.js لا يدعم بالفعل حالة الاستخدام الخاصة بك:
بعض الميزات المطلوبة بشكل شائع متوفرة كإضافات:
لتمديد استخدامنا لـ webpack، يمكنك تعريف دالة تمدد تهيئته داخل next.config.js، كما يلي:
module.exports = {
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
// مهم: قم بإرجاع التهيئة المعدلة
return config
},
}يتم تنفيذ دالة
webpackثلاث مرات، مرتين للخادم (nodejs / edge runtime) ومرة للعميل. هذا يسمح لك بالتمييز بين تهيئة العميل والخادم باستخدام خاصيةisServer.
الوسيط الثاني لدالة webpack هو كائن يحتوي على الخصائص التالية:
buildId:String- معرف البناء، يستخدم كمعرف فريد بين عمليات البناءdev:Boolean- يشير إلى ما إذا كان التجميع سيتم في وضع التطويرisServer:Boolean- تكونtrueلتجميع جانب الخادم، وfalseلتجميع جانب العميلnextRuntime:String | undefined- وقت التشغيل المستهدف لتجميع جانب الخادم؛ إما"edge"أو"nodejs"، تكونundefinedلتجميع جانب العميل.defaultLoaders:Object- محملات افتراضية تستخدم داخليًا من قبل Next.js:babel:Object- تهيئةbabel-loaderالافتراضية
مثال على استخدام defaultLoaders.babel:
// مثال تهيئة لإضافة محمل يعتمد على babel-loader
// هذا المصدر مأخوذ من مصدر إضافة @next/mdx:
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.mdx/,
use: [
options.defaultLoaders.babel,
{
loader: '@mdx-js/loader',
options: pluginOptions.options,
},
],
})
return config
},
}nextRuntime
لاحظ أن isServer تكون true عندما يكون nextRuntime هو "edge" أو "nodejs"، nextRuntime "edge" مخصص حاليًا للـ middleware ومكونات الخادم في وقت تشغيل edge فقط.