Pertahankan Kontrol: Panduan untuk Webpack dan React, Pt. 2

Diterbitkan: 2022-03-11

Di bagian pertama tutorial React-Webpack ini, kita membahas cara mengkonfigurasi loader dan melakukan optimasi. Sekarang, kita akan masuk ke teknik yang lebih canggih terkait dengan kasus penggunaan konfigurasi React/Webpack tertentu.

TypeScript dan Bereaksi dengan Webpack: Masukkan Babel

Ada beberapa cara di mana Anda dapat menggunakan TypeScript dalam proyek React Anda. Sementara ts-loader adalah pilihan yang baik, saya ingin fokus pada bagaimana mentranspile TypeScript menggunakan @babel/preset-typescript karena banyak perpustakaan menerbitkan plugin Babel untuk melakukan optimasi waktu kompilasi. Selain memproses file TypeScript, ini akan memungkinkan kita untuk menggunakan plugin Babel yang disediakan oleh berbagai perpustakaan seperti komponen gaya atau react-intl.

Hal pertama yang perlu kita lakukan adalah menginstal dependensi TypeScript dan Babel:

 npm install -D typescript @babel/preset-typescript @types/react @types/react-dom

Kami kemudian akan membuat file konfigurasi TypeScript menggunakan program baris perintah tsc :

 ./node_modules/.bin/tsc -init --lib dom --jsx react --isolatedModules

Perintah di atas akan menghasilkan tsconfig.json yang cocok untuk menulis kode untuk lingkungan browser. Opsi --isolatedModules memberlakukan beberapa batasan yang memastikan bahwa kode yang Anda tulis akan kompatibel dengan @babel/plugin-transform-typescript . Opsi ini berguna untuk dimiliki agar IDE Anda memperingatkan Anda saat Anda menulis kode dengan cara yang tidak dapat diubah oleh Babel.

Selanjutnya, kita akan memperbarui babel.config.js dengan memperkenalkan preset baru:

 @@ -6,7 +6,8 @@ module.exports = { modules: false } ], - "@babel/preset-react" + "@babel/preset-react", + "@babel/preset-typescript" ], plugins: [ "@babel/plugin-transform-runtime",

Dan aktifkan ekstensi file .ts di webpack.config.js :

 @@ -11,7 +11,7 @@ module.exports = function(_env, argv) { return { devtool: isDevelopment && "cheap-module-source-map", - entry: "./src/index.js", + entry: "./src/index.tsx", output: { path: path.resolve(__dirname, "dist"), filename: "assets/js/[name].[contenthash:8].js", @@ -20,7 +20,7 @@ module.exports = function(_env, argv) { module: { rules: [ { - test: /\.jsx?$/, + test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", @@ -61,6 +61,9 @@ module.exports = function(_env, argv) { } ] }, + resolve: { + extensions: [".js", ".jsx", ".ts", ".tsx"] + }, plugins: [ isProduction && new MiniCssExtractPlugin({

Konfigurasi di atas cukup untuk dapat mentranspile kode kita tetapi tidak benar-benar memvalidasinya. Kita perlu melakukan pengecekan tipe dalam proses paralel yang terpisah menggunakan fork-ts-checker-webpack-plugin .

Pertama, kita perlu menginstalnya:

 npm install -D fork-ts-checker-webpack-plugin

Kemudian, kita akan menambahkannya ke bagian plugins di webpack.config.js :

 @@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); const TerserWebpackPlugin = require("terser-webpack-plugin"); const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -78,6 +79,9 @@ module.exports = function(_env, argv) { "process.env.NODE_ENV": JSON.stringify( isProduction ? "production" : "development" ) + }), + new ForkTsCheckerWebpackPlugin({ + async: false }) ].filter(Boolean), optimization: {

Menentukan async: false akan mencegah Webpack mengeluarkan kode yang tidak valid dan menampilkan kesalahan kompilasi dalam overlay saat menjalankan server pengembangan.

Catatan: Anda mungkin juga tertarik dengan makro Babel, yang mendapatkan daya tarik.

CSS, Ditingkatkan melalui Webpack

Pada artikel sebelumnya, kami membahas gaya dasar menggunakan css-loader . Ada beberapa cara untuk meningkatkan konfigurasi ini.

Konfigurasi yang diusulkan akan memanfaatkan modul CSS, Sass, dan teknologi PostCSS. Meskipun keduanya saling melengkapi dalam beberapa hal, Anda tidak perlu menggunakan semuanya secara bersamaan. Pengaturan terakhir akan mengaktifkan semua plugin di atas, dan kami akan menyerahkannya kepada Anda untuk meninggalkan sesuatu jika Anda yakin "Anda tidak akan membutuhkannya."

Modul CSS

Modul CSS mengatasi masalah pelingkupan global dalam file CSS dengan menghasilkan nama unik dan acak untuk setiap kelas CSS. Dari sudut pandang file JavaScript yang menggunakan Modul CSS, hubungan antara nama kelas asli dan yang diacak diwakili oleh objek yang diekspor oleh loader. Ini memungkinkan Anda menemukan dan menggunakan kelas yang ditentukan dalam file CSS dengan cara yang membuat tabrakan yang tidak disengaja hampir tidak mungkin.

Dukungan Modul CSS sudah disertakan dalam css-loader . Sekarang kita perlu menambahkan aturan baru untuk memperjelas kapan Modul CSS digunakan:

 @@ -33,11 +33,25 @@ module.exports = function(_env, argv) { }, { test: /\.css$/, use: [ isProduction ? MiniCssExtractPlugin.loader : "style-loader", "css-loader" ] }, + { + test: /\.module.css$/, + use: [ + isProduction ? MiniCssExtractPlugin.loader : "style-loader", + { + loader: "css-loader", + options: { + modules: true + } + } + ] + }, { test: /\.(png|jpg|gif)$/i, use: {

Dengan itu, file apa pun yang diakhiri dengan .module.css akan diproses dengan Modul CSS diaktifkan.

PostCSS

PostCSS adalah kerangka kerja pemrosesan CSS yang dapat diperluas dengan perpustakaan besar plugin yang dapat Anda gunakan untuk memperluas sintaks CSS, melakukan pengoptimalan, atau menyediakan fallback untuk browser lama.

Pertama, kita akan menginstal dependensi yang diperlukan:

 npm install -D postcss-loader postcss-import postcss-preset-env

Dan perbarui konfigurasi CSS kami:

 @@ -47,9 +47,11 @@ module.exports = function(_env, argv) { { loader: "css-loader", options: { - modules: true + modules: true, + importLoaders: 1 } - } + }, + "postcss-loader" ] }, {

Kami akan mengkonfigurasi PostCSS menggunakan plugin berikut:

  • postcss-import : Memungkinkan @import untuk memproses pernyataan @import
  • postcss-preset-env : Menerapkan polyfill untuk mendukung fitur CSS modern di sebagian besar browser

Buat file bernama postcss.config.js dan isi dengan yang berikut:

 module.exports = { plugins: { "postcss-import": {}, "postcss-preset-env": {} } };

Anda dapat memeriksa direktori plugin PostCSS untuk ekstensi lain yang mungkin berguna bagi Anda dan menambahkannya ke konfigurasi Anda.

Sass/SCSS

Sass adalah kerangka pemrosesan CSS populer lainnya. Tidak seperti PostCSS, Sass hadir dengan "termasuk baterai." Di luar kotak, Sass menawarkan dukungan untuk aturan bersarang, mixin, dan aturan penulisan ulang untuk kompatibilitas mundur. Sementara PostCSS bertujuan untuk mempertahankan sintaks CSS standar, sintaks Sass mungkin berbeda dari spesifikasi CSS. Meskipun demikian, Sass adalah solusi yang ada di mana-mana sehingga menggunakannya untuk membuat CSS mungkin merupakan opsi yang lebih mudah—tetapi yang bergantung pada kebutuhan Anda.

Pertama, kita akan menginstal dependensi yang diperlukan:

 npm install -D sass-loader node-sass resolve-url-loader

Kemudian, tambahkan loader baru ke konfigurasi Webpack kami:

 @@ -38,6 +38,25 @@ module.exports = function(_env, argv) { "css-loader" ] }, + { + test: /\.s[ac]ss$/, + use: [ + isProduction ? MiniCssExtractPlugin.loader : "style-loader", + { + loader: "css-loader", + options: { + importLoaders: 2 + } + }, + "resolve-url-loader", + { + loader: "sass-loader", + options: { + sourceMap: true + } + } + ] + }, { test: /\.(png|jpg|gif)$/i, use: {

Kami sebelumnya telah mengatasi beberapa masalah dengan cuplikan di atas:

  1. Kami memperkenalkan resolve-url-loader setelah sass-loader untuk membuat impor relatif berfungsi dari @import ed file Sass.

  2. Kami menentukan opsi importLoaders untuk css-loader untuk memproses file @import -ed menggunakan loader yang mengikutinya.

Dengan konfigurasi di atas, kita dapat mulai membuat style kita menggunakan Sass/SCSS selain Modul PostCSS dan CSS yang telah kita jelaskan sebelumnya. Meskipun semua opsi ini dapat diaktifkan secara bersamaan, Anda tidak harus menggunakan semuanya di dalam proyek yang sama, sehingga Anda dapat memilih satu alat yang paling sesuai dengan kebutuhan Anda.

Pekerja Web

Pekerja web adalah konsep yang kuat dari web modern. Ini memungkinkan Anda melepaskan komputasi mahal dari utas utama. Pekerja web harus digunakan dengan hemat dan dicadangkan untuk hal-hal yang tidak dapat dioptimalkan dengan penjadwalan cerdas di dalam loop peristiwa. Menggunakan pekerja web adalah kandidat yang baik untuk mengoptimalkan operasi yang panjang dan sinkron.

Webpack memudahkan penggunaan pekerja web dengan worker-loader , yang menggabungkan file pekerja ke dalam direktori keluaran dan menyediakan kelas pekerja ke file konsumen.

Pertama, kita perlu menginstal worker-loader :

 npm install -D worker-loader

Kemudian tambahkan ke file konfigurasi kami:

 @@ -31,6 +31,10 @@ module.exports = function(_env, argv) { } } }, + { + test: /\.worker\.js$/, + loader: "worker-loader" + }, { test: /\.css$/, use: [

Sekarang, yang perlu Anda lakukan untuk mulai menggunakan pekerja web adalah membuat instance kelas yang diimpor dari file yang diakhiri dengan .worker.js yang mengimplementasikan API Pekerja biasa.

Pekerja Layanan

Pekerja layanan memungkinkan teknik pengoptimalan tingkat lanjut dan peningkatan pengalaman pengguna. Mereka membiarkan aplikasi Anda bekerja secara offline saat pengguna kehilangan koneksi jaringan mereka. Mereka juga membiarkan aplikasi Anda dimuat secara instan bahkan setelah mendorong pembaruan.

Webpack memudahkan untuk mengonfigurasi pekerja layanan untuk aplikasi Anda menggunakan modul workbox-webpack-plugin. Pertama, kita perlu menginstalnya:

 npm install -D workbox-webpack-plugin

Kemudian, kita akan menambahkan plugin ke bagian plugins dari konfigurasi Webpack kita:

 @@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); const TerserWebpackPlugin = require("terser-webpack-plugin"); const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); +const WorkboxPlugin = require("workbox-webpack-plugin"); module.exports = function(_env, argv) { const isProduction = argv.mode === "production"; @@ -75,6 +76,11 @@ module.exports = function(_env, argv) { "process.env.NODE_ENV": JSON.stringify( isProduction ? "production" : "development" ) + }), + new WorkboxPlugin.GenerateSW({ + swDest: "service-worker.js", + clientsClaim: true, + skipWaiting: true }) ].filter(Boolean), optimization: {

Konfigurasi di atas menggunakan opsi berikut:

  • swDest menentukan nama file keluaran untuk file pekerja yang dihasilkan.
  • clientsClaim menginstruksikan pekerja layanan untuk mengambil kendali halaman segera setelah pendaftaran dan mulai menyajikan sumber daya yang di-cache alih-alih menunggu halaman berikutnya dimuat ulang.
  • skipWaiting membuat pembaruan pada pekerja layanan langsung berlaku alih-alih menunggu semua instance aktif dihancurkan.

Ada alasan bagus mengapa dua opsi terakhir bukan default. Ketika diaktifkan secara bersamaan, ada potensi gangguan terjadi dalam situasi sensitif waktu, jadi terserah Anda untuk membuat keputusan sadar apakah akan tetap mengaktifkan opsi tersebut di konfigurasi Anda.

Terakhir, kita perlu mendaftarkan service worker saat pengguna membuka aplikasi kita:

 @@ -2,3 +2,9 @@ import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(<h3>React App</h3>, document.getElementById("root")); + +if ("serviceWorker" in navigator) { + window.addEventListener("load", () => { + navigator.serviceWorker.register("/service-worker.js"); + }); +}

Pekerja layanan mampu melakukan lebih dari sekadar menambahkan kemampuan offline ke aplikasi kami. Jika Anda memerlukan tingkat kontrol yang lebih besar atas perilaku pekerja layanan, Anda dapat menggunakan plugin InjectManifest sebagai gantinya. Dengan menulis file pekerja layanan Anda sendiri, Anda juga dapat mengaktifkan caching untuk permintaan API dan menggunakan fitur lain yang diaktifkan oleh pekerja layanan seperti pemberitahuan push. Anda dapat mengetahui lebih lanjut tentang kemampuan Workbox di bagian Resep Lanjutan dari dokumentasi resminya.

Konfigurasi React Webpack Tingkat Lanjut: Memberikan Keunggulan pada Proyek Anda

Bagian kedua dari seri tutorial Webpack kami ini seharusnya membekali Anda dengan pengetahuan yang diperlukan untuk memperluas konfigurasi Webpack Anda melewati kasus penggunaan React yang paling umum. Saya harap informasi ini berguna bagi Anda dan Anda dapat dengan percaya diri memperluas konfigurasi pribadi Anda untuk mencapai tujuan khusus untuk proyek Anda.

Seperti biasa, Anda dapat menemukan file konfigurasi lengkap di GitHub dan merujuk ke dokumentasi Webpack dan bagian pluginnya untuk menemukan lebih banyak resep yang sesuai dengan tujuan Anda. Terima kasih telah membaca!