ابراهيم حمدى2 نشر 13 مارس 2022 أرسل تقرير مشاركة نشر 13 مارس 2022 لقد وضعت وبحثت عن كل الاكواد لإبطال توليد الملفات العشوائية ولكن دون جدوى أرجو الحل حيث أضفت صورة من خلال scss فقام بقراءة الملف العشوائى الخارجى ولم تظهر الصورة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد أبو عواد نشر 13 مارس 2022 أرسل تقرير مشاركة نشر 13 مارس 2022 بتاريخ 21 دقائق مضت قال ابراهيم حمدى: بالطبع تفضل ملف webpack.config.js const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const path = require('path'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js', clean: true, }, optimization: { chunkIds: false, }, stats: { warnings: false, }, performance: { maxEntrypointSize: 400000, maxAssetSize: 100000, hints: false, }, devServer: { static: { directory: path.join(__dirname, 'dist'), }, devMiddleware:{ writeToDisk: true, }, // compress: true, port: 9000, open: true, // livereload: false, hot: false, }, module: { rules: [ { test: /\.(css|sass|scss)$/i, use: [ // Creates `style` nodes from JS strings MiniCssExtractPlugin.loader, // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, { test: /\.(jpe?g|png|gif)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'images', limit: 8192, } }, }, { test: /\.(svg|eot|woff|woff2|ttf)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'fonts', limit: 8192, } }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), new MiniCssExtractPlugin({ filename: 'css/[name].bundle.css', }), new CleanWebpackPlugin({ dry: true, verbose: true, }), ], }; وملف الSCSS header{ background: url('../images/header.jpg'); background-size: cover; background-position: center; } وملف الpackage.json { "name": "safarnysite", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve --mode development", "dist": "webpack serve --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "bootstrap": "^5.1.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.7.1", "file-loader": "^6.2.0", "html-loader": "^3.1.0", "html-webpack-plugin": "^5.5.0", "jquery": "^3.6.0", "mini-css-extract-plugin": "^2.6.0", "popper.js": "^1.16.1", "sass": "^1.49.9", "sass-loader": "^12.6.0", "url-loader": "^4.1.1", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } } حاول تثبيت الاصدار الخامس من حزمة css-loader والاصدار الاول من حزمة html loader من خلال تنفيذ الاوامر التالية npm i html-loader@1.3.2 npm i css-loader@5.0.0 ثم قم بحذف ملف dist وجرب تنفيذ الأمر مرة أخرى وأخبرنا بالنتيجة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد أبو عواد نشر 13 مارس 2022 أرسل تقرير مشاركة نشر 13 مارس 2022 هل يمكنك ارفاق كود معالجة الصور وملفات css الموجود في ملف webpack.config وأيضا محتوى ملف package.json ؟ 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 ابراهيم حمدى2 نشر 13 مارس 2022 الكاتب أرسل تقرير مشاركة نشر 13 مارس 2022 بتاريخ 12 دقائق مضت قال محمد أبو عواد: هل يمكنك ارفاق كود معالجة الصور وملفات css الموجود في ملف webpack.config وأيضا محتوى ملف package.json ؟ بالطبع تفضل ملف webpack.config.js const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const path = require('path'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].bundle.js', clean: true, }, optimization: { chunkIds: false, }, stats: { warnings: false, }, performance: { maxEntrypointSize: 400000, maxAssetSize: 100000, hints: false, }, devServer: { static: { directory: path.join(__dirname, 'dist'), }, devMiddleware:{ writeToDisk: true, }, // compress: true, port: 9000, open: true, // livereload: false, hot: false, }, module: { rules: [ { test: /\.(css|sass|scss)$/i, use: [ // Creates `style` nodes from JS strings MiniCssExtractPlugin.loader, // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, { test: /\.(jpe?g|png|gif)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'images', limit: 8192, } }, }, { test: /\.(svg|eot|woff|woff2|ttf)$/, use: { loader: 'url-loader', options:{ name: '[name].[ext]', outputPath:'fonts', limit: 8192, } }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), new MiniCssExtractPlugin({ filename: 'css/[name].bundle.css', }), new CleanWebpackPlugin({ dry: true, verbose: true, }), ], }; وملف الSCSS header{ background: url('../images/header.jpg'); background-size: cover; background-position: center; } وملف الpackage.json { "name": "safarnysite", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve --mode development", "dist": "webpack serve --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "bootstrap": "^5.1.3", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.7.1", "file-loader": "^6.2.0", "html-loader": "^3.1.0", "html-webpack-plugin": "^5.5.0", "jquery": "^3.6.0", "mini-css-extract-plugin": "^2.6.0", "popper.js": "^1.16.1", "sass": "^1.49.9", "sass-loader": "^12.6.0", "url-loader": "^4.1.1", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
ابراهيم حمدى2
لقد وضعت وبحثت عن كل الاكواد لإبطال توليد الملفات العشوائية ولكن دون جدوى أرجو الحل حيث أضفت صورة من خلال scss فقام بقراءة الملف العشوائى الخارجى ولم تظهر الصورة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.