Gunakan Webpack untuk Menguasai Konfigurasi Aplikasi React – Beragampengetahuan

Pengembang yang mengandalkan alat seperti Create React App mungkin tidak memiliki pengalaman langsung dengan Webpack. Namun, secara manual mengonfigurasi webpack dapat memberikan wawasan yang berharga tentang mekanisme yang mendasari bagaimana aplikasi web modern dibangun dan dibundel.

Panduan ini menyediakan walkthrough langkah demi langkah yang mengatur aplikasi React menggunakan webpack dari awal dan memberikan penjelasan yang jelas dan terperinci.

Apa itu Webpack dan mengapa menggunakannya?

Webpack adalah bundler modul yang kuat. Ini memproses semua file JavaScript Anda bersama dengan aset lain serta aset seperti CSS, gambar, dan font (mis. Transfer, menyusut) dan mengikatnya ke dalam file yang dioptimalkan yang dapat dimuat secara efisien oleh browser.

Dalam proyek React, Webpack dapat membantu Anda:

• Bundel .js dan .jsx file Masukkan skrip optimasi tunggal atau ganda untuk produksi.
• Menggunakan Babel Konversi JavaScript modern (ES6+) dan JSX menjadi kode yang dapat dipahami oleh browser.
• Gaya proses, gambar, dan aset lainnyasehingga mereka dapat diimpor dan digunakan langsung di komponen Anda.
• Jalankan Server Pengembangan Lokal Menggunakan Muat Ulang Bidang -Webpack dapat menggunakan alat seperti webpack-dev-server untuk menyediakan layanan ke aplikasi Anda secara lokal. Ini menyediakan fitur-fitur seperti Hot Module Replacement (HMR) atau Real-Time Reloading, jadi setiap kali file disimpan, browser secara otomatis diperbarui tanpa memuat ulang halaman penuh. Ini dapat meningkatkan kecepatan pengembangan dan loop umpan balik.

Prasyarat

Sebelum Anda mulai, pastikan yang berikut ini adalah:

• Node.js dan NPM diinstal di komputer Anda
• Anda memiliki pemahaman dasar tentang reaksi dan javascript

Anda dapat memeriksa apakah Node.js dan NPM diinstal dengan menjalankan perintah berikut di terminal:

Jika perintah ini tidak mengembalikan nomor versi, mereka perlu diinstal.

Unduh dan instal Node.js (termasuk NPM) dari situs web resmi.

Langkah 1: Siapkan folder proyek

Buat dan inisialisasi direktori proyek Anda:

mkdir my-react-webpack-app
cd my-react-webpack-app
npm init -y

Ini akan membuat file package.json yang akan melacak dependensi dan skrip kami.

Langkah 2: Pasang dependensi

Reaksi dan reaksi

Ini adalah perpustakaan inti untuk membangun dan memberikan antarmuka pengguna bereaksi.

npm install react react-dom

Webpack, Babel dan Loader

Untuk menggabungkan dan mentransfer kode Anda, kami memerlukan Webpack, Babel, dan beberapa loader dan plugin.

Instal mereka sebagai dependensi pengembangan:

npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin css-loader style-loader

Mengapa paket ini?

• Webpack, Webpack-Cli – Fungsi Webpack Core dan Antarmuka Baris Perintah mereka.
• Webpack-dev-server – Putar server lokal dengan dimuat ulang real-time untuk pengembangan yang lebih cepat.
• Babel -lovaler – Menginstruksikan Webpack untuk menggunakan Babel untuk file JavaScript dan JSX.
• @Babel/Core, @Babel/Babel/Preset-ENV, @Babel/Preset-React – Paket Babel diperlukan untuk mengkompilasi javascript modern dan bereaksi sintaks JSX.
• html-webpack-plugin – Secara otomatis menghasilkan file HTML dan menyuntikkan bundel webpack ke dalamnya.
• CSS-Loader, Style Loader – Memungkinkan impor dan menyuntikkan gaya CSS langsung ke komponen reaksi.

Langkah 3: Mengkonfigurasi Babel (.BabelRC)

Babel adalah kompiler JavaScript yang memungkinkan kita menggunakan JavaScript modern (ES6+) dan JSX dalam kode React kita dan kemudian mengonversi kode ke format yang kompatibel dengan browser yang lebih lama.

Tanpa Babel, browser tidak akan memahami JSX atau sintaks JavaScript yang lebih baru, terutama fungsi panah, kelas, tautan opsional, dan fungsi lainnya.

Buat file konfigurasi .babelrc

Buat file .babelrc di root proyek dan memiliki yang berikut:

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

menjelaskan

• @Babel/preset-env – Preset ini memberi tahu Babel untuk mengonversi JavaScript modern (ES6+) menjadi versi yang berfungsi di browser target Anda. Secara otomatis menentukan plug-in universal yang diperlukan berdasarkan konfigurasi dukungan lingkungan atau browser.
• @Babel/Reaksi Preset – Preset ini memungkinkan Babel untuk memahami dan trans JSX sintaks, yang tidak dipahami oleh browser.

Mengapa ini penting

React menggunakan JSX, yang terlihat seperti HTML, tetapi sebenarnya adalah panggilan sintaksis untuk panggilan react.createlement (). JavaScript modern (seperti fungsi panah, asinkron/tunggu/const/const) juga tidak mendukung semua browser. Babel memastikan bahwa kode Anda bekerja dengan andal di lingkungan yang berbeda.

Dengan menggunakan preset ini, kode Anda akan tetap bersih dan modern sementara masih kompatibel dengan browser yang lebih tua.

Langkah 4: Konfigurasi Webpack (Webpack.config.js)

Webpack bertanggung jawab untuk menggabungkan file proyek Anda, mengonversinya melalui loader dan mengoptimalkannya untuk penempatan. Sekarang Anda perlu mengonfigurasi webpack untuk menangani kode React Anda dan aset lainnya.

Buat file webpack.config.js

Buat file bernama webpack.config.js di direktori root proyek dan tambahkan konfigurasi berikut:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = 
  // Entry point where the bundling starts
  entry: './src/index.jsx',

  output: 
    // Output directory for bundled files
    path: path.resolve(__dirname, 'dist'),
    // Name of the bundled file
    filename: 'bundle.js',
    clean: true, // Automatically clears previous build files in 'dist'
  ,

  module: 
    rules: [
      
        // Use Babel to transpile .js and .jsx files
        test: /\.(js,
      
        // Process CSS files
        test: /\.css$/,
        use: ['style-loader', 'css-loader'], // Inject CSS into the DOM
      ,
    ],
  ,

  resolve: 
    // Extensions that can be omitted during import statements
    extensions: ['.js', '.jsx'],
  ,

  plugins: [
    // Generate an HTML file and inject the bundled JS into it
    new HtmlWebpackPlugin(
      template: './public/index.html',
    ),
  ],

  devServer: 
    // Set the static directory to 'dist' where bundled files are stored
    static: path.resolve(__dirname, 'dist'),
    // Set the port for the development server
    port: 3000,
    open: true, // Open the browser automatically when the server starts
    hot: true, // Enable hot module replacement for live updates
  ,

  mode: 'development', // Set to 'production' for optimized builds (minification, etc.)
;

menjelaskan

Pintu masuk

• Entri: ‘./src/index.jsx’ – Ini adalah titik awal untuk aplikasi Anda. Webpack akan mulai menggabungkan file dari sini yang ditentukan. Dalam sebagian besar proyek React, ini biasanya index.jsx atau index.js.

Keluaran

• Path: Path. Diperbaiki (__ dirname, ‘dist’) – Tentukan di mana Webpack harus menempatkan file yang dibundel. __dirname mengacu pada direktori root, dan “dist” adalah folder tempat output disimpan.
• Nama file: ‘bundle.js’ – Tentukan nama file output (mis., JavaScript Anda yang dibundel).
• Bersihkan: Ya – Pastikan untuk menghapus direktori output sebelum bangunan baru untuk mencegah file lama berkeliaran di folder Dist.

Modul

• aturan – Ini menentukan bagaimana jenis file yang berbeda harus ditangani selama proses bundling.
• Pra-loader:
  • Tes:/\. (JS | JSX) qun // – Ekspresi reguler ini cocok dengan file .js dan .jsx.
  • Kecualikan: / node_modules / – Kecualikan folder node_modules dari pemrosesan Babel untuk menghindari konversi yang tidak perlu.
  • menggunakan: [‘babel-loader’] – Beri tahu Webpack untuk mentransfer file JavaScript dan JSX melalui Babel menggunakan Babel-Loader.
• Css loader dan style loader:
  • Tes: /\ .css $ / – Cocokkan file .css.
  • menggunakan: [‘style-loader’, ‘css-loader’] – Style Loader menyuntikkan CSS ke DOM.CSS-LOADER untuk memproses CSS, memungkinkan Anda untuk mengimpor CSS langsung ke file JavaScript.

menyelesaikan

• Ekstensi: [‘.js’, ‘.jsx’] – Konfigurasi ini memungkinkan Anda menghilangkan ekstensi saat mengimpor modul. Misalnya, impor aplikasi dari ‘./app’; Ini akan secara otomatis diselesaikan ke app.js atau app.jsx.

Plugin

• htmlwebpackplugin(Templat: ‘./public/index.html’) – Tentukan templat file HTML. Plugin akan menghasilkan file HTML dan menyuntikkan JavaScript yang dibundel ke dalamnya untuk memastikan semua yang ada di browser diatur dengan benar.

Pengembang

• Static: path.resolve (__ dirname, ‘dist’) – Beri tahu Webpack Devserver di mana file statis (output bundel) berada.
• Port: 3000 – Menentukan nomor port yang akan dijalankan oleh server pengembangan. Anda dapat mengakses aplikasi Anda di browser Anda
• Buka: Itu benar – Ketika server dimulai, browser default akan dibuka secara otomatis.
• HOT: Ya – Aktifkan Penggantian Modul Hot (HMR), memungkinkan browser untuk memperbarui modul yang diubah tanpa memuat ulang seluruh halaman. Ini meningkatkan pengalaman pengembangan dengan segera menerapkan perubahan.

model

• Model: ‘mengembangkan’ – Tentukan mode build. Dalam pengembangan, Webpack menyediakan kemampuan debugging yang berguna dan membangun lebih cepat.
• Saat beralih ke produksi, Webpack mengoptimalkan build dengan menghapus kode, menghapus kode yang tidak digunakan, dll.

Mengapa konfigurasi ini dibutuhkan

Konfigurasi webpack ini memastikan berikut:

• File JSX React Anda ditransfer menggunakan Babel.
• CSS diproses dan disuntikkan dengan benar.
• Kode Anda dibundel bersama dan memberikan pembaruan waktu nyata selama pengembangan (terima kasih kepada Webpack-Dev-Server).
• Output ini telah dioptimalkan untuk pengembangan dan mudah dikonfigurasi untuk produksi saat siap untuk ditempatkan.

Langkah 5: Buat struktur folder

Buat folder dan file Anda:

my-react-webpack-app/
├── public/
│   └── index.html
├── src/
│   └── index.jsx
├── webpack.config.js
├── .babelrc
└── package.json

Langkah 6: Tulis template html (publik/index.html)

Template HTML ini akan berfungsi sebagai dasar untuk aplikasi React Anda. Webpack akan menggunakan templat ini untuk menghasilkan file html akhir dan menggabungkan javascript ke dalamnya.

Buat file publik/index.html

Dalam folder publik, buat file index.html dengan yang berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React Webpack App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Mengapa file ini dibutuhkan

• Bundling Webpack: WebPack menggunakan htmlwebpackplugin untuk secara otomatis menyuntikkan bundel javascript terakhir (bundle.js) ke dalam template html ini. Anda tidak perlu memperbarui file HTML secara manual setiap kali Anda mengubah aplikasi.
• Instalasi Reaksi:

  Sangat penting karena ini adalah elemen DOM yang diterjemahkan oleh aplikasi React Anda. Bereaksi akan menggunakan reactdom.render (document.getElementById (‘root’)) menginstal komponen root ke div ini.

Dengan menjaga struktur tetap sederhana dan fokus, file ini adalah bagian langsung namun penting dari pack Anda dan pengaturan reaksi.

Langkah 7: Buat file input reaksi (src/index.jsx)

import React from 'react';
import  createRoot  from 'react-dom/client';
const App = () => <h1>Hello, Webpack + React!</h1>;
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App ></App>);

Langkah 8: Tambahkan skrip ke package.json

Pada langkah ini, Anda akan menambahkan skrip khusus ke paket. JSON dapat dengan mudah menjalankan server pengembangan dan membangun proses.

Perbarui bagian skrip di package.json

Di file package.json Anda, di bawah bagian skrip, tambahkan baris berikut:

"scripts": 
  "start": "webpack serve --config webpack.config.js",
  "build": "webpack --config webpack.config.js"

menjelaskan

• “Start”: “Webpack melayani -config webpack.config.js” – Skrip ini menjalankan server pengembangan. Saat Anda menjalankan startup NPM (atau startup benang saat menggunakan benang), Webpack akan mulai webpack-dev-server dari webpack.config.js Anda. Dan menggunakan aplikasi di server lokal, biasanya di
• “Build”: “Webpack -Config Webpack.config.js” – Script ini digunakan untuk membuat build produksi yang dioptimalkan. Saat Anda menjalankan NPM untuk menjalankan build (jika Anda menggunakan benang (jika Anda menggunakan benang), bundel webpack javascript, CSS, dan aset lainnya, mempersempit kode, dan menerapkan optimisasi yang dioptimalkan, seperti menghilangkan overinasi kode mati, membuat aplikasi lebih cepat dan lebih kecil.

Langkah 9: Jalankan aplikasi Anda

Mulai server pengembangan:

NPM dimulai

Kunjungi dan Anda akan melihat:

sebagai kesimpulan

Dalam panduan ini, kami telah berhasil mengatur aplikasi React dari awal menggunakan webpack. Dengan mengonfigurasi Webpack secara manual, kami telah belajar cara menggabungkan kode, menangani JavaScript modern dan JSX dengan Babel, dan menyertakan gaya dalam versi final.