تنظیم واکنش با صفحه وب و بابل از ابتدا

مرحله 3: پیکربندی صفحه وب

ایجاد a webpack.config.js پرونده Webpack به یک فایل ورودی ، یک مسیر خروجی و یک نام پرونده برای جاوا اسکریپت همراه نیاز دارد:

const path = require("path");

module.exports = {
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
};

مرحله 4: اضافه کردن پشتیبانی بابل

Webpack با لودر و افزونه کار می کند. لودرها به صفحه وب می گویند که چگونه می توان انواع مختلف پرونده را پردازش کرد. برای کامپایل JSX ، ما به بابل احتیاج داریم.

وابستگی های بابل را نصب کنید:

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader

سپس ، به روز کنید webpack.config.js برای شامل بابل در قوانین ماژول:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader",
            },
        ],
    },
};

بعد ، ایجاد کنید .babelrc پرونده برای پیکربندی بابل:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

مرحله 5: تنظیم سرور Webpack Dev

برای خدمت به برنامه React ما ، ما نیاز داریم webpack-dev-serverبشر

تغییر دادن webpack.config.js برای افزودن سرور توسعه:

module.exports = {
    devServer: {
        static: path.join(__dirname, "dist"),
        compress: true,
        port: 3000,
    },
};

بروزرسانی package.json با اسکریپت ها برای شروع و ساخت پروژه:

"scripts": {
  "start": "webpack serve --open",
  "build": "webpack"
}

اکنون ، اجرا کنید:

npm start

برنامه React شما باید در مرورگر باز شود.

مرحله ششم: الگوی HTML با افزونه Webpack

به طور پیش فرض ، Webpack ایجاد نمی کند index.html پرونده ما استفاده می کنیم html-webpack-plugin برای ایجاد یکی با اسکریپت بسته نرم افزاری ما. ما از گزینه Template از افزونه برای پیوند به پرونده index.html که در ابتدا ایجاد کرده ایم استفاده خواهیم کرد.

افزونه را نصب کنید:

npm install --save-dev html-webpack-plugin

تغییر دادن webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "index.html"),
        }),
    ],
};

حالا ، index.html به طور خودکار شامل اسکریپت بسته بندی شده ما خواهد بود.

مرحله 7: اضافه کردن پشتیبانی CSS

Webpack پرونده های CSS را به طور پیش فرض پردازش نمی کند. برای اجازه این کار ، لودرهای لازم را نصب کنید:

npm install style-loader css-loader

اکنون ، به روز کنید webpack.config.js برای درج قوانین مربوط به رسیدگی به CSS: ما به هر دو این لودر نیاز داریم زیرا لودر سبک استفاده از CSS در بسته نرم افزاری است و CSS-Loader برای Web Pack برای درک نحوه پردازش CSS است.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
};

برای اعمال CSS ، ایجاد یک styles.css پرونده را وارد کرده و وارد کنید index.js:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

سپس ، آن را وارد کنید index.js:

import "./styles.css";

مرحله 8: رسیدگی به دارایی (تصاویر ، SVG)

برای استفاده از تصاویر در پروژه ما ، برای پردازش آنها به وب وب نیاز داریم. بروزرسانی webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|svg)$/i,
                type: "asset/resource",
            },
        ],
    },
};

اکنون می توانید تصاویر را در اجزای خود وارد و استفاده کنید:

import logo from "./logo.png";

مرحله 9: حل و فصل پسوندهای پرونده

به طور پیش فرض ، Webpack هنگام وارد کردن ماژول ها به پسوندهای پرونده نیاز دارد. برای ساده سازی واردات ، موارد زیر را اضافه کنید webpack.config.js:

resolve: {
    extensions: [".js", ".jsx"],
},

این به ما امکان می دهد پرونده ها را بدون مشخص کردن وارد کنیم .js یا .jsx:

import Component from "./Component";

پایان

اکنون ، شما یک تنظیم کاملاً کاربردی React با Webpack ، Babel ، CSS و کنترل دارایی دارید. این رویکرد گام به گام تضمین می کند که هر پیکربندی را درک کنید. 🎉 کدگذاری مبارک!

برای کدی که مورد بحث قرار گرفته است ، repo github من را بررسی کنید
[https://github.com/Naveenprasad59/How-to-create-ReactApp-from-Scratch/tree/master]