Dasar-dasar penyiapan webpack

Pertama, kita akan menginstal webpack, ini dilakukan dengan menggunakan perintah:



yarn add webpack webpack-cli -Djika Anda menggunakan manajer paket benang

npm i webpack webpack-cli --save-dev, untuk manajer paket npm



Webpack dikonfigurasi menggunakan file konfigurasi webpack.config.js, yang disimpan di direktori root proyek.



Contoh file konfigurasi:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

Konfigurasi awal adalah sebagai berikut:

• watch - membuat webpack memperhatikan perubahan file dan membangun kembali;
• entri - Menunjukkan titik masuk ke proyek, dan di mana untuk mulai membuat grafik ketergantungan proyek internal;
• output - Menentukan jalur di mana file yang dibuat akan ditempatkan dan bagaimana itu akan dinamai;

Anda juga perlu menginstal webpack-dev-server, yang Anda perlukan untuk mengembangkan dan men-debug aplikasi.



yarn add webpack-dev-serveruntuk benang manajer paket atau

npm i webpack-dev-serverjika menggunakan npm.



Untuk mengkonfigurasi webpack-dev-server tambahkan devServer di file konfigurasi kami.



Parameter untuk webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

Kami juga perlu menambahkan / mengganti skrip startup proyek di file package.json kami:

"start": "webpack-dev-server --mode development",

dan skrip untuk membangun build:

"build": "webpack --mode production"

Bootloader

Loader adalah modul khusus yang digunakan untuk "memuat" modul lain. Mereka juga memungkinkan Anda untuk memproses file saat mereka diimpor atau "dimuat".



Loader dapat mengonversi file seperti TypeScript ke JavaScript, sass ke css. Mereka bahkan memungkinkan kita untuk melakukan hal-hal seperti mengimpor file CSS dan HTML langsung ke modul JavaScript kita. Untuk menggunakannya, Anda perlu mendaftarkan loader yang diperlukan di bagian module.rules dari file konfigurasi.



Contoh loader:

• babel-loader - menggunakan babel untuk memuat file ES2015.
• file-loader - untuk memuat berbagai file (gambar, trek musik, dll.) ke dalam direktori keluaran
• style-loader - digunakan untuk memuat gaya
• css-loader - memungkinkan pemuatan file gaya
• @ svgr / webpack - pemuat yang memungkinkan Anda menggunakan gambar svg sebagai elemen jsx

Untuk menggunakan babel-loader, Anda perlu menginstalbabel/ core . Instal juga presetbabel/ preset-env , yang mengkompilasi ES2015 + ke ES5 dengan secara otomatis mendeteksi plugin dan polyfile yang dibutuhkan oleh Babel. Selanjutnya, buat file .babelrc dan tambahkan preset yang diinstal sebelumnya ke dalamnya.

{
 "presets": [
   "@babel/preset-env"
 ]
}

Sekarang mari tambahkan loader ke konfigurasi kita untuk mengonversi file Javascript. Ini akan memungkinkan kita untuk menggunakan sintaks ES2015 + dalam kode kita (yang secara otomatis akan diubah menjadi ES5 di build akhir).

{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},

Contoh konfigurasi dengan file-loader

{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},

Contoh konfigurasi untuk @ svgr / webpack loader

{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}

Plugin

Plugin adalah tulang punggung webpack, karena pada dasarnya semua pekerjaannya dibangun di atas sistem plugin. Mereka sangat memperluas kemampuan bootloader.



Loader melakukan pra-pemrosesan file dalam format apa pun. Mereka bekerja pada level file individu selama atau sebelum pembuatan paket. Setelah loader selesai, plugin akan berputar. Plugin biasanya hanya menjalankan satu fungsi.



Untuk menggunakannya, Anda perlu menambahkan plugin yang diperlukan di bagian plugin di file konfigurasi.



Contoh plugin:

• html-webpack-plugin - digunakan untuk menghasilkan file html
• copy-webpack-plugin - Menyalin file satu per satu atau seluruh direktori yang sudah ada ke direktori build.
• definePlugin - memungkinkan Anda membuat konstanta global
• HotModuleReplacementPlugin - mengaktifkan mode HMR, memperbarui hanya bagian yang telah berubah, tanpa memuat ulang aplikasi sepenuhnya.

Contoh konfigurasi dengan plugin tambahan:

plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],

Kami juga akan menambahkan plugin UglifyjsWebpackPlugin, yang meminimalkan kode js, untuk ini Anda perlu menginstal uglifyjs-webpack-plugin dan menambahkannya di bagian pengoptimalan

optimization: {
   minimizer: [new UglifyJsPlugin()]
},