Rekayasa front-end: Panduan konfigurasi Webpack

2024-07-12

Rekayasa front-end: Panduan konfigurasi Webpack

Teman-teman front-end, hari ini kita akan berbicara tentang Webpack yang disukai dan dibenci orang. Ya, ini adalah alat pembuatan yang dikonfigurasi untuk membuat Anda ingin menghancurkan keyboard Anda, tetapi Anda tidak dapat hidup tanpanya. Jangan khawatir, ikuti saya dan saya jamin Anda akan beralih dari pemula Webpack menjadi master konfigurasi!

Apa itu Webpack?

Sederhananya, Webpack adalah alat pengemasan modul statis untuk aplikasi JavaScript modern. Saat Webpack memproses aplikasi, Webpack secara internal membuat grafik ketergantungan yang memetakan setiap modul yang diperlukan oleh proyek dan menghasilkan satu atau lebih bundel.

Kedengarannya tinggi? Faktanya, ini untuk mengatur dan mengemas file kode Anda yang berantakan menjadi file yang dapat dipahami dan dijalankan oleh browser. Ini seperti seorang wanita pembersih yang bekerja sangat keras yang menjaga semua pakaian, buku, dan mainan di rumah Anda tetap rapi.

Konfigurasi dasar

Pertama, mari kita lihat konfigurasi dasar Webpack.Membuatwebpack.config.js File, ini basis konfigurasi kami:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
1
2
3
4
5
6
7
8
9

Di Sini,entry menentukan titik masuk aplikasi,output Memberi tahu Webpack tempat mengeluarkan bundel yang dibuatnya, dan cara memberi nama file ini.

Loader: Biarkan Webpack memahami berbagai file

Webpack sendiri hanya memahami file JavaScript dan JSON. Loader memungkinkan Webpack memproses jenis file lain dan mengubahnya menjadi modul yang valid untuk digunakan oleh aplikasi.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Apakah kamu melihat? Kami memberi tahu Webpack: "Hai kawan, gunakan style-loader dan css-loader untuk memproses file .css, dan gunakan file-loader untuk memproses gambar."

Plugin: Keajaiban Webpack

Plugin adalah tulang punggung Webpack. Mereka dapat digunakan untuk menangani berbagai tugas, mulai dari pengoptimalan dan kompresi pengemasan, hingga mendefinisikan ulang variabel di lingkungan.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '我的超酷网页',
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12

Di sini kami menggunakan CleanWebpackPlugin untuk membersihkan /dist folder, dan HtmlWebpackPlugin untuk menghasilkan file HTML. Ini seperti memasang dua asisten kanan untuk Webpack, satu bertanggung jawab untuk membersihkan dan yang lainnya bertanggung jawab untuk mendekorasi ruangan.

Mode: pengembangan atau produksi?

Webpack menyediakan mode Opsi konfigurasi yang memberi tahu Webpack untuk menggunakan pengoptimalan bawaan untuk mode yang sesuai:

module.exports = {
  mode: 'production', // 或者 'development'
  // ...
};
1
2
3
4

Ketika disetel ke 'produksi', Webpack akan secara otomatis mengaktifkan banyak plugin pengoptimalan, seperti mengompresi kode JS. Mode 'pengembangan' berfokus pada pembangunan cepat dan pengalaman pengembangan yang luar biasa. Ini seperti memakai dua topi untuk Webpack, satu topi kerja dan yang lainnya topi liburan.

Server Pengembangan: Sensasi pembaruan terkini

Gunakan webpack-dev-server untuk menyediakan server web sederhana yang dapat dimuat ulang secara real time:

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
1
2
3
4
5
6
7

Setelah konfigurasi ini, jika Anda mengubah kode, browser akan otomatis di-refresh. Ini seperti memasang turbocharger pada proses pengembangan Anda!

Pemisahan kode: Jangan menaruh semua telur Anda dalam satu keranjang

Pemisahan kode adalah salah satu fitur paling menarik di Webpack. Ini memungkinkan Anda untuk membagi kode Anda menjadi beberapa paket, yang kemudian dapat dimuat sesuai permintaan atau secara paralel.

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
1
2
3
4
5
6
7
8

Konfigurasi ini memberi tahu Webpack: "Hai, bantu saya mengekstrak kode umum dan mengemasnya secara terpisah." Hal ini dapat menghindari pemuatan modul berulang kali dan mengurangi ukuran paket utama. Ini seperti mengemas kembali koper Anda, meletakkan barang-barang yang sering digunakan di tempat yang paling mudah dijangkau.

Pengguncangan Pohon: Mengguncang cabang dan daun yang berlebih

Tree Shaking adalah istilah yang umum digunakan untuk menggambarkan penghapusan kode yang tidak direferensikan dalam konteks JavaScript.

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};
1
2
3
4
5
6

Konfigurasi ini secara otomatis akan mengaktifkan Tree Shaking dalam mode produksi. Ini akan menganalisis kode Anda untuk mengetahui kode mana yang tidak digunakan, dan kemudian "memangkas" kode-kode yang tidak berguna ini seperti seorang tukang kebun yang memangkas pohon.

Meringkaskan

Oke, setelah semua mengutak-atik ini, Anda seharusnya memiliki pemahaman komprehensif tentang konfigurasi Webpack. Dari konfigurasi dasar hingga fitur lanjutan, kami membahas fungsi utama Webpack. Ingat, Webpack seperti Pisau Swiss Army yang kuat, dan menggunakannya dengan benar dapat sangat meningkatkan efisiensi pengembangan dan kinerja aplikasi Anda.

Tentu saja, dunia Webpack lebih dari itu. Ada lebih banyak fitur lanjutan yang menunggu untuk Anda jelajahi, seperti pemuatan lambat, pramuat, caching, dll. Namun, setelah menguasai dasar-dasar ini, Anda dapat dengan bangga mengatakan: "Saya juga ahli konfigurasi Webpack!"

Terakhir, jangan lupa untuk sering-sering memeriksa dokumentasi resmi Webpack. Karena di dunia front-end yang berubah dengan cepat, praktik terbaik kemarin mungkin sudah ketinggalan zaman saat ini. Teruslah belajar dan menjelajah, dan Anda akan dapat melangkah lebih jauh menuju teknik front-end.

Sekarang, ambil keyboard Anda dan mulai perjalanan konfigurasi Webpack Anda! Ingat, setiap kesalahan adalah batu loncatan dalam perjalanan Anda menjadi seorang master. Ayo pukul para pekerja!

Program mini wawancara Haima

Ini mencakup berbagi pengalaman wawancara terbaru, analisis pertanyaan wawancara nyata, bank soal lengkap 2000+, dan penjelasan rinci tentang manual teknis wawancara front-end dan back-end; apakah Anda melakukan wawancara untuk rekrutmen sekolah atau rekrutmen sosial atau keinginan untuk meningkatkan kemampuan pemrogramanmu, kamu bisa menghadapinya dengan tenang~

dari batu paving. Ayo pukul para pekerja!

Program mini wawancara Haima

[Gambar tautan eksternal sedang ditransfer...(img-LBHUGtbe-1720689041341)]

Berbagi teknologi