جافاسكريبت - Webpack - استدعاء الصور باستخدام File-Loader
أنا أستخدم Webpack لتطبيق React الخاص بي.
قمت بتثبيت 'File-loader' و 'Url-loader' في إعدادات webpack الخاصة بي.
ومع ذلك، لست متأكداً من كيفية ربط الصور بمكوناتي. أنا أحمل 'src' للصورة في ملف 'Data.js' حيث أقوم بتمرير البيانات الخاصة بالصورة إلى مكون React.
ملف webpack.config.js الخاص بي:
... const PATHS = { app : path.join( __dirname, "app" ), build : path.join( __dirname, "build" ) }; const common = { entry : { app : PATHS.app }, o اقرأ أكثر →جافاسكريبت - لماذا حزمة Webpack الخاصة بي كبيرة جدًا؟
أنا أكتب بعض جافا سكريبت التي تستخدم Moment.js و Handlebars. من المفترض أن يكون حجم Moment.js مضغوطًا 30 كيلوبايت و Handlebars أقل من 10 كيلوبايت مضغوطًا. لكن عندما أستخدم Webpack لتجميع شيفرتي، أحصل على ملف نهائي حجمه 271 كيلوبايت!
قمت بتثبيت webpack-bundle-size-analyzer للتحقيق ووجدت ملفات أكبر بكثير مما كنت أتوقع:
webpack اقرأ أكثر →جافاسكريبت - كيف لا يتم حل المسارات باستخدام Webpack؟
أنا أعمل على مشروع ReactJs باستخدام Webpack وsass-loader وcss-loader وurl-loader.
أود عدم حل مسارات خط الوجه وتركها تمامًا كما تم تعيينها في ملف SASS.
المشكلة:
إذا قمت باستدعاء مسار مطلق (مثل: http://fonts.com/my-font.eot أو
اقرأ أكثر →جافاسكريبت - Webpack لا يمكنه استيراد الحزمة المثبتة من Git
لذلك قمت بعمل فورك لحزمة في الجيت. أجريت التغييرات الخاصة بي. ثم في الطرفية الخاصة بي
npm install --save git+https://github.com/hayk94/ddp.js.gitثم أحاول استيراد الحزمة في الكود الخاص بي بهذا الشكل
import DDP from 'ddp.js'لكن webpack يعطيني هذا الخطأ
ERROR in ./main.js Module not found: Error: Can't resolve 'ddp.js' in '/Users/hayksafaryan/projects/b2cEmbedLib' @ ./main.js 23:11-28 @ multi (webpack)-dev-server/clien اقرأ أكثر →جافاسكريبت - إضافة Webpack: كيفية إضافة محمل إلى وحدة ديناميكيًا؟
أقوم بكتابة مكون إضافي لـ Webpack. أثناء حل الوحدة، يجب أن يقوم هذا المكون الإضافي بإضافة محمل محدد ديناميكيًا لبعض الوحدات، ولكن ليس لجميعها.
فكرتي الآن هي الاستفادة من حدث after-resolve الخاص بـ normal-module-factory. هناك، يمكنني تعديل المصفوفة data.loader
اقرأ أكثر →جافاسكريبت - تجميع مكون ستينسل باستخدام ويبباك
هل يعرف أحد كيفية تجميع مكون الويب الذي تم إنشاؤه باستخدام Stencil باستخدام Webpack. لدي عدة مكونات Stencil وأحتاج إلى إنشاء حزمة بحيث أتمكن من استخدامها في مشاريع أخرى.
الإجابة رقم 1
لقد طوّرت Ionic إضافة Stencil لـ webpack، والتي تتيح استيراد المكونات بسهولة باستخدام مجمّع webpack.
قد تكون مهتماً أيضًا بهذا المقال الممتاز الذي يشرح بمزيد من التفاصيل كيفية استخدام الإضافة.
الإجابة رقم 2
عادةً ما يقوم
اقرأ أكثر →جافاسكريبت - وسيطة مسار Webpack ليست سلسلة
لقد كنت أحاول جاهداً معرفة سبب قول Webpack بالنسبة للوحدة الرئيسية "app" إن المسار ليس سلسلة نصية. إنه ليس بنفس بالضبط الأخطاء الأخرى التي قرأتها على Stack Overflow، وهذا هو السبب الذي دفعني لطرح السؤال بنفسي.
أنا أستخدم أحدث إصدار من Webpack (5.16) و Webpack-cli (4.4) وأحاول إنشاء هذا ليعمل على Node.
لدي webpack.conf
اقرأ أكثر →جافاسكريبت - تغييرات كبيرة في Webpack للوحدات المدمجة على موقع Gatsby
لقد حاولت نشر موقعي على Gatsby على منصة Netlify، لكنني أستمر في الحصول على هذه الأخطاء لمختلف وحدات Node كلما حاولت النشر. لقد حاولت إنشاء ملف webpack.config.js واتباع كلا الحلين المقترحين دون جدوى. كما حاولت استخدام alias بدلاً من fallback، وإضافة قسم browser إلى ملف package.json والذي يضبط ال
اقرأ أكثر →جافا سكريبت - إضافة تبعية في مكون ويب باك
هل من الممكن إضافة تبعية من داخل مكون Webpack إضافي؟ أنا أقوم بإنشاء ملفات تستخدم القوالب، وعندما تتغير هذه القوالب أود أن يقوم webpack --watch بتحفيز بناء آخر.
إليك الإضافة:
function BlahPlugin (options) { this.options = options; } BlahPlugin.prototype.apply = function (compiler) { // This is the file that I'd اقرأ أكثر →جافا سكريبت - webpack-dev-server لا ينشئ مجلد dist على الجهاز المحلي
يقوم webpack-dev-server بتجميع ملفات html و scss و js بنجاح ويتم أيضًا تقديم النتيجة على localhost:8080 لكن مجلد dist لا يتم إنشاؤه محليًا. فيما يلي إعداداتي في webpack:
var extractPlugin = new ExtractTextPlugin({ filename: 'main.css' }); module.exports = { entry: './src/in اقرأ أكثر →