Saatnya Anda mempelajari Webpack

Saya menggunakan Webpack.

Saya telah menggunakannya di create-react-app (CRA)melalui react-scripts, dan di proyek lain yang memiliki konfigurasi khusus yang telah disiapkan sebelum saya mencobanya. Tapi saya tidak begitu tahu cara kerjanya. Saya melihat konfigurasinya, saya memahami beberapa ide di baliknya, namun saya belum pernah menulis konfigurasi Webpack, atau mencoba menyiapkannya sendiri. Tentang itulah artikel ini akan membahasnya. Mulai dari tanpa konfigurasi, hingga pengaturan fungsi dasar yang akan menggabungkan HTML, CSS, dan Javascript.

Sasaran saya adalah mengungkap sebanyak mungkin proses tersebut, sehingga Webpack bisa lebih mudah diakses dan bersahabat dengan pengembang baru.

Jika Anda bekerja di React atau pustaka atau kerangka kerja lain yang memerlukan proses pembangunan dan Anda ingin menghilangkan ketergantungan Anda pada CRA atau sekadar merasa lebih nyaman dengan keajaiban yang terjadi aktif, kita akan langsung membuat proyek. Karena saya menulis ini bersamaan dengan proyek ini, saya akan menjelaskan langkah demi langkah dan menjelaskan cara saya mengatasi setiap masalah dan meneliti misteri.

Silakan ikuti atau gunakan repo github yang telah saya siapkan. Jika Anda memilih untuk mengikutinya, saya secara khusus menggunakan gambar dari file tertentu sehingga tidak bisa disalin begitu saja. Mengetikkan hal-hal ini akan membantu Anda merasa nyaman dalam membuat kesalahan, melihatnya, dan memperbaikinya.

Pertama, buat proyeknya ditata-

mkdir webpack-in-plain-english
cd webpack-in-plain-english
npm init -y
mkdir src
touch src/index.js
mkdir src/components
touch src/components/App.js
npm i react react-dom

Sekarang kita memerlukan beberapa dependensi dev agar semuanya berfungsi. Bagi saya, di sinilah segala sesuatunya menjadi membingungkan karena banyak fungsi yang mulai kabur. Kita memerlukan Webpack, dan teman-temannya adalah CLI danserver pengembang. Agar ini berfungsi di browser, kita perlu transpilasies6 dan bagian selanjutnya dari kode kita ke dalames5 standar. Webpack tidak transpilasi, itulah tugas babel dan loader dan preset paket.

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-react

Webpack sendiri sebagai sebuah paket tidak akan kami sentuh secara langsung, ia melakukan pekerjaannya tetapi hanya melalui paket webpack-cli yang telah kami instal sehingga kami dapat menghubungkan dan mengonfigurasi Webpack. Paket Webpack dev server adalah alat bagus yang akan menjalankan proses pembangunan kami, dan menyajikannya ke browser. Sedangkan untuk item Babel, item tersebut benar-benar layak untuk ditulis sendiri dan kemungkinan besar saya akan menulis lanjutannya untuk mengetahui lebih jauh cara kerjanya dan kemungkinan konfigurasi yang berbeda.

Segala sesuatu yang baru saja kita instal memerlukan beberapa konfigurasi.

Entri adalah tempat Webpack mulai merayapi file. Pada dasarnya ia dimuat di index.js, melihat isinya, dan jika ia melihat bahwa index.js sedang mengimpor file lain, ia menangani file-file tersebut sesuai dengan konfigurasi memiliki.

Output memungkinkan kita menentukan ke mana kita ingin file js yang dibundel kita pergi. Dalam hal ini kita akan menggunakan modul node.js 'path' untuk menentukan jalur kita. Kunci kedua pada objek hanyalah nama file.

Modul adalah tempat kita menentukan cara menangani setiap file yang ditemui Webpack. Array 'aturan' berisi objek yang menentukan tipe file dan cara menanganinya. Untuk setiap aturan, Anda menentukan seperti apa tampilan ekstensinya, folder atau file apa saja yang akan dikecualikan, dan apa yang akan digunakan saat menyiapkan file-file ini. Dalam contoh ini kami memberi tahu Webpack bahwa ia perlu mencari ekstensi file .js, mengecualikan ekstensi apa pun yang ada di folder node_modules, dan menggunakan babel-preset sebagai pemuatnya.

Konfigurasi sudah selesai, untuk saat ini. Kita perlu menambahkan beberapa skrip ke package.json sehingga kita benar-benar dapat memanfaatkan konfigurasi ini dan kecanggihan Webpack.

Skrip awal kita akan menjalankan server pengembang Webpack, yang melayani pembangunan proyek kita, namun tidak menulisnya ke disk, melainkan melakukannya di memori. Kami juga telah menetapkan bahwa kami berada dalam mode pengembangan, kami ingin browser dibuka saat kami menjalankan perintah ini, dan kami ingin Webpack mengawasi file kami dan 'hot' memuat ulang mereka ketika ada perubahan.

import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './components/App'
ReactDOM.render(<App />, document.getElementById('root'))

import React, { Component } from 'react'
export class App extends Component {
 render() {
  return <p>Hi, I've been packed, and transpiled</p>
 }
}

<!DOCTYPE html>
<html lang="en"> 
 <head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-  scale=1.0">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Webpack React</title>
</head> 
<body>  
  <div id="root"></div>
</body> 
</html>

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