منتصر احمد نشر 18 أبريل 2022 أرسل تقرير مشاركة نشر 18 أبريل 2022 الصور في webpack لا تظهر مع ان الامتداد صحيح والتنتقل الي مجلد dist 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 18 أبريل 2022 أرسل تقرير مشاركة نشر 18 أبريل 2022 قد تكون هاته من بين المشاكل المتكررة في ويب باك، يكون هذا عادة بتعارض يحدث ما بين الحزمتين html-loader و file-loader. نتأكد في حل المشكلة من استعمال نسخة أقدم من حزمة html-loader، يكون ذلك عن طريق تشغيل الأمر: npm i html-loader@1.3.2 أو باستبدال السطر الخاص بالحزمة في ملف package.json بـ: "html-loader":"^1.3.2" ثم اعادة تثبيت اعتماديات Node عن طريق تشغيل الأمر: npm run i ثم سيمكنك اعادة تشغيل خادم ويب باك او اخراج مجلد dist بشكل عادي. في حالة استمرار المشكلة يرجى ارفاق ملف package.json وملف اعداد webpack.config.js للنظر في المشكلة على نحو أدق. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 منتصر احمد نشر 18 أبريل 2022 الكاتب أرسل تقرير مشاركة نشر 18 أبريل 2022 بتاريخ 48 دقائق مضت قال Adnane Kadri: قد تكون هاته من بين المشاكل المتكررة في ويب باك، يكون هذا عادة بتعارض يحدث ما بين الحزمتين html-loader و file-loader. نتأكد في حل المشكلة من استعمال نسخة أقدم من حزمة html-loader، يكون ذلك عن طريق تشغيل الأمر: npm i html-loader@1.3.2 أو باستبدال السطر الخاص بالحزمة في ملف package.json بـ: "html-loader":"^1.3.2" ثم اعادة تثبيت اعتماديات Node عن طريق تشغيل الأمر: npm run i ثم سيمكنك اعادة تشغيل خادم ويب باك او اخراج مجلد dist بشكل عادي. في حالة استمرار المشكلة يرجى ارفاق ملف package.json وملف اعداد webpack.config.js للنظر في المشكلة على نحو أدق. webpack.config.js: const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const webpack = require("webpack"); module.exports = { devServer: { contentBase: path.join(__dirname, "./dist"), port: 1233, overlay: true, //for errors writeToDisk: true, }, entry: { app: "./src/index.js", }, output: { filename: "[name].js", path: path.resolve(__dirname, "./dist"), assetModuleFilename: "images/[name].[ext]", }, // loaders module: { rules: [ { test: /\.html$/i, loader: "html-loader", }, { test: /\.(sa|sc|c)ss$/i, use: [ MiniCssExtractPlugin.loader, // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, { test: /.*\.(gif|png|jpe?g|svg)$/i, use: [ { loader: "file-loader", options: { name: "[name].[ext]", // المسار المراد رفع الصور عليه }, }, ], }, ], }, // plugins plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: "./src/index.html", filename: "index.html", }), new HtmlWebpackPlugin({ template: "./src/about.html", filename: "about.html", }), new HtmlWebpackPlugin({ template: "./src/contact_us.html", filename: "contact_us.html", }), new HtmlWebpackPlugin({ template: "./src/product_one.html", filename: "product_one.html", }), new HtmlWebpackPlugin({ template: "./src/product_two.html", filename: "product_two.html", }), new HtmlWebpackPlugin({ template: "./src/product_three.html", filename: "product_three.html", }), new HtmlWebpackPlugin({ template: "./src/distributors.html", filename: "distributors.html", }), new MiniCssExtractPlugin({ filename: "css/style.css" }), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", }), new webpack.LoaderOptionsPlugin({ options: { webpack: { hashFilenames: false, }, }, }), ], }; package.json: { "name": "testing", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack serve --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@fortawesome/fontawesome-free": "^6.1.1", "bootstrap": "^5.1.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.7.1", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.5.0", "html-loader": "^1.3.2", "jquery": "^3.6.0", "jquery-ui-touch-punch": "^0.2.3", "mini-css-extract-plugin": "^2.6.0", "popper.js": "^1.16.1", "sass": "^1.50.0", "sass-loader": "^12.6.0", "style-loader": "^3.3.1", "sweetalert2": "^11.4.8", "webpack": "^5.72.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.0", "webpack-jquery-ui": "^2.0.1" } } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 18 أبريل 2022 أرسل تقرير مشاركة نشر 18 أبريل 2022 بتاريخ 34 دقائق مضت قال Mohamed Montaser3: webpack.config.js: package.json: من الممكن وجود تعارض بسبب إصدار حزمة css-loader أرجو حذف السطر الخاص بها من ملف package.json وكتابة الأمر التالي npm i css-loader@5.0.0 ومن ثم حذف مجلد dist وإعادة تشغيل المشروع مرة أخرى عبر الأمر npm run build 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 منتصر احمد نشر 18 أبريل 2022 الكاتب أرسل تقرير مشاركة نشر 18 أبريل 2022 بتاريخ 12 ساعات قال شرف الدين2: من الممكن وجود تعارض بسبب إصدار حزمة css-loader أرجو حذف السطر الخاص بها من ملف package.json وكتابة الأمر التالي npm i css-loader@5.0.0 ومن ثم حذف مجلد dist وإعادة تشغيل المشروع مرة أخرى عبر الأمر npm run build شكرا جدا ولكن هل يمكنك شرح ماذا كانت المشكله اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 شرف الدين حفني نشر 18 أبريل 2022 أرسل تقرير مشاركة نشر 18 أبريل 2022 بتاريخ 2 دقائق مضت قال Mohamed Montaser3: شكرا جدا ولكن هل يمكنك شرح ماذا كانت المشكله المشكلة أن الحزمة css-loader التي كانت لديك تتعامل بشكلٍ مختلف عن الإصدار 5 لذا لا تعمل بشكلٍ صائب عند التعامل مع الصور , تحتاج إلى معاملة مختلفة وطريقة مختلفة عن الحزم السابقة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
منتصر احمد
الصور في webpack لا تظهر مع ان الامتداد صحيح والتنتقل الي مجلد dist
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.