حل مشكلة توليد ملفات عشوائية عند تشغيل السيرفر فى webpack5

هل يمكنك ارفاق كود معالجة الصور وملفات css الموجود في ملف webpack.config وأيضا محتوى ملف package.json ؟

بتاريخ 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"
  }
}

بتاريخ 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 وجرب تنفيذ الأمر مرة أخرى وأخبرنا بالنتيجة