6 مفهوم Webpack برای توسعه دهندگان پیشرفته React

برای خواندن مقالات بیشتر از این قبیل به وبلاگ من مراجعه کنید

بیشتر اوقات، ما استفاده می کنیم create-react-app برای داربست یک برنامه جدید React و آن را یک روز صدا کنید.

اما در زیر سرپوش، بسیاری از کتابخانه ها در حال کار هستند تا مطمئن شوند همه چیز درست کار می کند. و بسته وب مهمترین آنها است.

امروز، ما به بررسی عمیق وب‌پک می‌پردازیم و سعی می‌کنیم قسمت‌های مختلف وب‌پک را که مربوط به آن هستند، درک کنیم توسعه واکنش نشان می دهد.

مشکل چیست؟

ما می دانیم که مرورگرهای ما چیزی جز HTML، JavaScript و CSS نمی فهمند. بنابراین سؤالات واضح هستند.

• مرورگرهای ما چگونه فایل های دیگر را درک می کنند .jsx

• چگونه همه فایل های مختلف در مرورگر بارگذاری می شوند؟

• برنامه ما چگونه همراه است؟

• چگونه می توانیم آنها را بهینه کنیم؟

بسته وب برای نجات

Webpack اینجاست تا روز را برای ما نجات دهد! این محبوب ترین باندلر موجود در بازار است و دلایل واضحی دارد!

چی بسته وب انجام می دهد همه چیز را به تبدیل می کند قابل خواندن توسط مرورگر فایل هایی که در تصویر زیر به خوبی نشان داده شده اند:

چرا باید اهمیت دهید؟

بیشتر اوقات شما این کار را نمی کنید. اما دانش وب پک می تواند در برخی موارد پیشرفته به شما کمک کند:

به طور کلی، داشتن یک نمای کلی از فرآیند بسته‌بندی باعث می‌شود شما در مورد کاردستی خود اطمینان بیشتری داشته باشید و اشکالات سیستم تولید را درک کنید.

Webpack چگونه کار می کند

به طور معمول، وب پک از طریق فایلی به نام پیکربندی می شود webpack.config.js. اینجاست که ما می توانیم همه چیز را پیکربندی کنیم!

بیایید با یک فایل پیکربندی ساده شروع کنیم و سعی کنیم قطعات مختلف آن را درک کنیم.

مثال

فایل پیکربندی بسیار ساده برای وب پک در زیر آمده است:

const path = require('path')

module.exports = {

  entry: path.resolve(__dirname, 'src', 'index.js'),

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }

}

اجازه دهید در موردش صحبت کنیم entry و output.

1. ورود

entry نقطه ورود درخواست شما است. اینجا جایی است که وب پک سفر خود را آغاز می کند. ما می دانیم که برنامه های React ما مانند یک درخت هستند. همه اجزاء از App.js.

اما ما کجاست App.js زنده؟ در داخل زندگی می کند index.js فایل، و به همین دلیل webpack از طریق وارد برنامه می شود index.js و یک نمودار وابستگی ایجاد می کند تا مشخص کند کدام فایل ها باید ابتدا بارگذاری شوند.

2. خروجی

این یکی دیگر از مفاهیم آسان برای درک است. پس از انجام تمام کارها، webpack یک فایل باندل ایجاد می کند. که در output، می توانیم مشخص کنیم نام و محل از فایل خروجی

همچنین کاربردهای دیگری نیز دارد. اگر می‌خواهید نام‌های باندل پویا برای سیستم تولید برای مدیریت نسخه تولید کنید، می‌توانید این کار را در اینجا انجام دهید!

بیایید این را یک قدم جلوتر برداریم و سعی کنیم درک کنیم که چگونه ما jsx یا css فایل ها رسیدگی می شود.

3. لودر

لودرها یک مفهوم بسیار مهم در وب پک هستند. آنها مانند کامپایلر هستند. Webpack نوع خاصی از فایل را بررسی می کند و از لودرهای مناسب برای مدیریت آنها استفاده می کند.

یک پیکربندی معمولی از loader می تواند مانند موارد زیر باشد:

module.exports = {
    entry: { ... as before}
    output: { ... as before },

    module: {
        rules: [
            {
                test: /\.[jt]sx?$/, // matches .js, .ts, .jsx and .tsx files
                use: ['babel-loader'],, // uses babel-loader for the specified file types
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/,
            }
        ],
    }
}

حالا، نگاه کنید module بخش مجموعه ای از قوانین را می طلبد. هر قانون چندین بخش دارد:

• test -> نوع فایل خاصی را بررسی می کند. از بیان منظم استفاده می کند.

• use -> فهرستی از لودرهای مورد استفاده برای این نوع فایل خاص را مشخص می کند.

• include -> کدام فایل ها باید پردازش شوند.

• exclude -> که نباید پردازش شود.

گاهی اوقات برای یک فایل خاص به بیش از یک نوع لودر نیاز داریم. یک مثال خوب بارگذاری فایل های CSS است. قانون برای آن این است:

{
    test: /\.css$/, // matches .css files only
    use: ['style-loader', 'css-loader'],
},

اینجا، هر دو css-loader و style-loader برای پردازش فایل استفاده می شود. نکته مهمی که در اینجا باید به آن توجه کرد این است که این لودرها به ترتیب معکوس بارگیری می شوند.

یعنی ابتدا css-loader کار خواهد کرد و سپس style-loader روی خروجی تولید شده توسط css-loader.

به طور مشابه، برای ما .scss فایل ها:

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
},

4. پلاگین ها

پلاگین ها یکی دیگر از جنبه های بسیار مهم وب پک هستند. پلاگین ها دلیل اصلی قدرتمندی وب پک هستند.

پلاگین ها مانند کتابخانه ها هستند. آن‌ها می‌توانند در هر مرحله از فرآیند جمع‌آوری ضربه بزنند و هر کاری که می‌خواهند انجام دهند.

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = merge(common ,{
    entry:  {...},
    output: {...},
    module: {...}

    plugins: [ new CleanWebpackPlugin() ]
})

در مثال بالا از افزونه ای به نام استفاده کردیم clean-webpack-plugin. کاری که این افزونه انجام می دهد این است که هر بار که دستور ساخت خود را اجرا می کنیم، پوشه خروجی را تمیز می کند.

افزونه های زیادی وجود دارد که می توانید از آنها استفاده کنید. در صورت تمایل می توانید به وب سایت رسمی وب پک مراجعه کنید.

5. حالت

این یک مفهوم ساده برای درک است. شما می خواهید از یک راه اندازی متفاوت برای توسعه و تولید خود استفاده کنید. برای این، می توانید استفاده کنید mode.

module.exports = merge(common ,{
    entry:  {...},
    output: {...},
    module: {...},
    plugins:{...},

    mode : 'development' or 'production'
})

اگر حالت را روی production، سپس بسته خروجی شما کوچک و بهینه می شود.

6. سرور توسعه

این تنظیمات نهایی برای برنامه شما است. در حین توسعه برنامه، نمی خواهید هر بار که چیزی را تغییر می دهید، آن را کامپایل کنید. به همین دلیل شما نیاز به یک devServer راه اندازی برای برنامه شما

module.exports = merge(common ,{
    entry:  {...},
    output: {...},
    module: {...},
    plugins:{...},
    mode :  {...},

    devServer: {
        contentBase: path.join(__dirname, 'public/'),
        port: 3000,
        publicPath: 'http://localhost:3000/dist/',
        hotOnly: true,
    },
})

اکنون این تنظیمات به برنامه شما از dist که قبلاً به عنوان خود تنظیم کرده اید output.

نتیجه

شما بروید. اکنون باید درک اولیه ای از وب پک و قسمت های مختلف آن داشته باشید. در اینجا یک راه اندازی کامل است اگر شما علاقه مند هستید:

const path =  require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test:  /\.[jt]sx?$/,
                use: ['babel-loader'],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            }
        ]
    },
    plugins: [new CleanWebpackPlugin()],
    devServer: {
        contentBase: path.join(__dirname, 'public/'),
        port: 3000,
        publicPath: 'http://localhost:3000/dist/',
        hotOnly: true,
    }
}

روز خوبی داشته باشی!

چیزی برای گفتن داری؟ از طریق لینکدین یا وب سایت شخصی با من در تماس باشید