Selamat siang teman!
Saya mempersembahkan kepada Anda terjemahan dari artikel "Webpack: Pengenalan lembut" oleh Tyler McGinnis.
Sebelum menjelajahi teknologi baru, tanyakan pada diri Anda dua pertanyaan:
- Mengapa alat ini dibutuhkan?
- Tugas apa yang dilakukannya?
Jika Anda tidak dapat menjawab pertanyaan-pertanyaan ini, Anda mungkin tidak membutuhkan teknologi yang Anda pelajari. Mari kita coba menjawab pertanyaan-pertanyaan ini terkait dengan Webpack.
Mengapa Anda membutuhkan webpack?
Webpack adalah pembuat modul. Ini mem-parsing modul aplikasi, membuat grafik ketergantungan, kemudian merangkai modul dalam urutan yang benar menjadi satu atau lebih bundel, yang dapat direferensikan oleh file "index.html".
App.js -> |
Dashboard.js -> | Bundler | -> bundle.js
About.js -> |
Masalah apa yang diselesaikan webpack?
Biasanya, saat membuat aplikasi JavaScript, kode tersebut dipecah menjadi beberapa bagian (modul). Kemudian, di file "index.html", Anda harus menentukan tautan ke setiap skrip.
<body>
...
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="libs/react.min.js"></script>
<script src='src/admin.js'></script>
<script src='src/dashboard.js'></script>
<script src='src/api.js'></script>
<script src='src/auth.js'></script>
<script src='src/rickastley.js'></script>
</body>
Ini tidak hanya membosankan tetapi juga rawan kesalahan. Penting untuk tidak hanya melupakan skrip apa pun, tetapi juga mengaturnya dalam urutan yang benar. Jika Anda memuat skrip yang bergantung pada React sebelum memuat React itu sendiri, aplikasi Anda akan rusak. Webpack memecahkan masalah ini. Anda tidak perlu khawatir tentang memasukkan semua skrip secara berurutan.
<body>
...
<script src='dist/bundle.js'></script>
</body>
Seperti yang akan segera kita ketahui, mengumpulkan modul hanyalah salah satu aspek dari cara kerja webpack. Jika perlu, Anda dapat memaksa webpack untuk melakukan beberapa transformasi modul sebelum menambahkannya ke bundel. Misalnya mengonversi SASS / LESS ke CSS biasa, atau JavaScript modern ke ES5 untuk browser lama.
Menginstal webpack
Setelah menginisialisasi proyek dengan npm, agar webpack berfungsi, Anda perlu menginstal dua paket -
webpackdan webpack-cli.
npm i webpack webpack-cli -D
webpack.config.js
Setelah menginstal paket-paket ini, webpack perlu dikonfigurasi. Untuk melakukan ini, file dibuat
webpack.config.jsyang mengekspor objek. Objek ini berisi pengaturan webpack.
module.exports = {}
Tugas utama webpack adalah menganalisis modul, mengubahnya secara opsional, dan menggabungkannya dengan cerdas menjadi satu atau beberapa bundel, sehingga webpack perlu mengetahui tiga hal:
- Titik masuk aplikasi
- Konversi yang akan dilakukan
- Di mana menempatkan bundel yang dihasilkan
Titik masuk
Tidak peduli berapa banyak modul yang dimiliki aplikasi, selalu ada satu titik masuk. Modul ini mencakup yang lainnya. Biasanya, file ini adalah index.js. Ini mungkin terlihat seperti ini:
index.js
imports about.js
imports dashboard.js
imports graph.js
imports auth.js
imports api.js
Jika kita memberi tahu webpack jalur ke file ini, ia menggunakannya untuk membuat grafik ketergantungan aplikasi. Untuk melakukan ini, Anda perlu menambahkan properti
entryke pengaturan webpack dengan nilai path ke file utama:
module.exports = {
entry: './app/index.js'
}
Konversi dengan loader
Setelah menambahkan titik masuk, Anda perlu memberi tahu webpack tentang transformasi yang perlu dilakukan sebelum membuat bundel. Untuk ini, loader digunakan.
Secara default, saat membuat grafik dependensi berbasis operator,
import / require()webpack hanya dapat memproses file JavaScript dan JSON.
import auth from './api/auth' //
import config from './utils/config.json' //
import './styles.css' // ️
import logo from './assets/logo.svg' // ️
Anda tidak akan berani membatasi diri Anda pada file JS dan JSON dalam aplikasi Anda, kemungkinan besar Anda juga memerlukan gaya, SVG, gambar, dll. Di situlah loader berperan. Tugas utama pemuat, seperti namanya, adalah menyediakan webpack dengan kemampuan untuk bekerja dengan lebih dari sekadar file JS dan JSON.
Langkah pertama adalah menginstal loader. Karena kami ingin memuat SVG, gunakan npm untuk menginstal svg-loader.
npm i svg-inline-loader -D
Selanjutnya, tambahkan ke pengaturan webpack. Semua pemuat disertakan dalam larik objek
module.rules:
module.exports = {
entry: './app/index.js',
module: {
rules: []
}
}
Informasi loader terdiri dari dua bagian. Yang pertama adalah jenis file yang sedang diproses (
.svgdalam kasus kami). Yang kedua adalah loader yang digunakan untuk memproses file jenis ini ( svg-inline-loaderdalam kasus kami).
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' }
]
}
}
Kami sekarang dapat mengimpor file SVG. Tapi bagaimana dengan file CSS kita? Untuk gaya yang digunakan
css-loader.
npm i css-loader -D
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: 'css-loader' }
]
}
}
Kami sekarang dapat mengimpor file SVG dan CSS. Namun, agar gaya kita berfungsi dengan benar, kita perlu menambahkan loader lain. Berkat,
css-loaderkami dapat mengimpor file CSS. Tapi itu tidak berarti mereka akan dimasukkan ke dalam DOM. Kami ingin tidak hanya mengimpor file seperti itu, tetapi juga menempatkannya di tag <style>sehingga dapat diterapkan ke elemen DOM. Untuk ini yang Anda butuhkan style-loader.
npm i style-loader -D
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
]
}
}
Perhatikan bahwa karena dua pemuat digunakan untuk memproses file CSS, nilai propertinya
useadalah larik. Perhatikan juga urutan loadernya, pertama style-loader, lalu css-loader. Itu penting. Webpack akan menerapkannya dalam urutan terbalik. Ini digunakan pertama kali css-loaderuntuk impor './styles.css', kemudian style-loaderuntuk memasukkan gaya ke DOM.
Loader dapat digunakan tidak hanya untuk mengimpor file, tetapi juga untuk mengonversinya. Yang paling populer adalah mengonversi JavaScript generasi berikutnya ke JavaScript modern menggunakan Babel. Ini digunakan untuk ini
babel-loader.
npm i babel-loader -D
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(js)$/, use: 'babel-loader' }
]
}
}
Ada loader untuk hampir semua jenis file.
Titik keluar
Sekarang webpack tahu tentang titik masuk dan pemuat. Langkah selanjutnya adalah menentukan direktori bundel. Untuk melakukan ini, Anda perlu menambahkan properti
outputke pengaturan webpack.
const path = require('path')
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
}
}
Seluruh proses terlihat seperti ini:
- Paket web menerima titik masuk yang terletak di
./app/index.js - Ini mem-parsing pernyataan
import / requiredan membuat grafik ketergantungan - Webpack mulai membuat paket dengan mengonversi kode menggunakan pemuat yang sesuai
- Dia mengumpulkan bungkusan dan memasukkannya ke dalamnya
dist/index_bundle.js
Plugin
Kami telah melihat cara menggunakan loader untuk memproses file individual sebelum atau selama pembuatan bundel. Tidak seperti loader, plugin memungkinkan Anda melakukan tugas setelah membuat bundel. Tugas-tugas ini dapat menyangkut paket itu sendiri dan kode lainnya. Anda dapat menganggap plugin sebagai pemuat yang lebih kuat dan tidak terlalu terbatas.
Mari kita ambil contoh.
HtmlWebpackPlugin
Tugas utama webpack adalah membuat bundel yang dapat direferensikan
index.html.
HtmlWebpackPluginmembuat index.htmldi direktori dengan bundel dan secara otomatis menambahkan tautan ke bundel di dalamnya.
Kami menamai bundel itu
index_bundle.jsdan meletakkannya di dalamnya dist. HtmlWebpackPluginakan membuat file baru index.htmldi direktori distdan menambahkan tautan ke bundel di dalamnya - <script src='index_bundle.js'></script>. Hebat, bukan? Sejak index.htmldibuat HtmlWebpackPlugin, bahkan jika kita mengubah titik keluar atau nama bundel, ia HtmlWebpackPluginakan menerima informasi ini dan mengubah isinya index.html.
Bagaimana kami menggunakan plugin ini? Seperti biasa, Anda perlu menginstalnya terlebih dahulu.
npm i html-webpack-plugin -D
Selanjutnya, tambahkan properti ke pengaturan webpack
plugins.
const path = require('path')
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
plugins: []
}
Kami membuat sebuah instance
HtmlWebpackPlugindalam sebuah array plugins.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
LingkunganPlugin
Jika Anda menggunakan React, Anda akan ingin mengatur ini
process.env.NODE_ENVke nilai productionsebelum menerapkan aplikasi. Ini akan memungkinkan React untuk membangun produksi dengan menghapus alat pengembangan seperti peringatan. Webpack memungkinkan Anda melakukan ini melalui plugin EnvironmentPlugin. Ini adalah bagian dari webpack, jadi Anda tidak perlu menginstalnya.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin(),
new webpack.EnvironmentPlugin({
'NODE_ENV': 'production'
})
]
}
Sekarang, di mana pun di aplikasi kami, kami dapat mengatur mode produksi dengan
process.env.NODE_ENV.
HtmlWebpackPlugindan EnvironmentPluginhanya sebagian kecil dari sistem plugin webpack.
Mode (mode)
Dalam proses menyiapkan aplikasi untuk produksi, ada beberapa langkah yang harus dilakukan. Kami baru saja membahas salah satunya - menyetel
process.env.NODE_ENVke nilai production. Tindakan lainnya adalah mengecilkan kode dan menghapus komentar untuk mengurangi ukuran bundel.
Ada plugin khusus untuk menyelesaikan tugas-tugas ini, tetapi ada cara yang lebih mudah. Di setelan webpack, ini dapat disetel
modeke developmentatau productionbergantung pada lingkungan pengembangan.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './app/index.js',
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(js)$/, use: 'babel-loader' }
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
],
mode: 'production'
}
Harap dicatat bahwa kami telah menghapus
EnvironmentPlugin. Faktanya adalah bahwa setelah mengatur modenilai, productionwebpack secara otomatis memberikan process.env.NODE_ENVnilai production. Itu juga mengecilkan kode dan menghapus peringatan.
Meluncurkan webpack
Saat ini kita tahu bagaimana webpack bekerja dan bagaimana mengkonfigurasinya, tetap menjalankannya.
Kami memiliki file
package.jsonyang dapat kami buat scriptuntuk dijalankan webpack.
"scripts": {
"build": "webpack"
}
Sekarang, saat Anda menjalankan perintah
npm run builddi terminal, webpack akan diluncurkan, yang akan membuat bundel yang dioptimalkan index_bundle.jsdan menempatkannya di dalamnya dist.
Mode pengembangan dan produksi
Secara keseluruhan, kita selesai dengan webpack. Terakhir, mari kita lihat cara beralih antar mode.
Saat membangun untuk produksi, kami ingin mengoptimalkan semuanya semaksimal mungkin. Dalam kasus mode pengembangan, yang benar adalah sebaliknya.
Untuk beralih antar mode, Anda perlu membuat dua skrip di
package.json.
npm run buildakan membangun bundel produksi.
npm run startakan memulai server pengembangan dan memantau perubahan file.
Jika Anda ingat, kami menetapkan ini
modeke nilai productiondi pengaturan webpack. Namun, kami tidak membutuhkannya sekarang. Kami ingin variabel lingkungan memiliki nilai yang sesuai tergantung pada perintah yang dijalankan. Mari kita mengubah script builddi package.json.
"scripts": {
"build": "NODE_ENV='production' webpack",
}
Jika Anda memiliki Windows, perintah akan:
"SET NODE_ENV='production' && webpack".
Sekarang dalam pengaturan webpack kita dapat mengubah nilainya
modetergantung process.env.NODE_ENV.
...
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
Untuk membangun bundel yang sudah jadi untuk aplikasi kita, kita cukup menjalankannya
npm run builddi terminal. File direktori distdibuat index.htmldan index_bunlde.js.
Server pengembangan
Dalam hal mengembangkan aplikasi, kecepatan adalah yang terpenting. Kami tidak ingin memulai ulang webpack dan menunggu build baru dengan setiap perubahan. Di sinilah paket berguna
webpack-dev-server.
Seperti namanya, ini adalah server webpack untuk pengembangan. Alih-alih membuat direktori
dist, ia menyimpan data dalam memori dan memprosesnya di server lokal. Terlebih lagi, ini mendukung live reboot. Artinya, setiap perubahan akan webpack-dev-servermembangun kembali file dan memulai ulang browser.
Instal paketnya.
npm i webpack-dev-server -D
Yang perlu dilakukan hanyalah menambahkan skrip
startke package.json.
"scripts": {
"build": "NODE_ENV='production' webpack",
"start": "webpack-dev-server"
}
Kami sekarang memiliki dua perintah: satu untuk memulai server pengembangan, dan yang lainnya untuk membangun bundel yang sudah selesai.
Saya harap artikel ini bermanfaat bagi Anda. Terima kasih atas perhatian Anda.