10 soalan temuduga webpack, berapa banyak yang anda boleh jawab?

Artikel ini akan berkongsi dengan anda 10 soalan temu bual tentang pek web Semak sebarang jurang dan isikannya. Berapa banyak daripada sepuluh soalan temuduga ini yang boleh anda jawab dengan betul? Bolehkah anda mendapatkan mereka semua betul?

Soalan temu bual hanyalah buku asas, 快速刷题就是背 (penemuduga bertanya kepada anda, tetapi dia mungkin tidak begitu mendalam), 想深入理解还是得花大量精力; 🎜>

Apakah proses pembinaan webpack?

• : menghuraikan parameter konfigurasi webpack, menggabungkan parameter yang diluluskan oleh shell dan dikonfigurasikan dalam fail webpack.config.js untuk membentuk keputusan konfigurasi terakhir; pemalam mendengar nod acara kitaran hayat binaan webpack, bertindak balas dengan sewajarnya, dan melaksanakan Kaedah jalankan objek memulakan penyusunan; mula menghuraikan fail untuk membina pepohon sintaks AST, mengetahui kebergantungan, dan mengulanginya; pemuat yang dikonfigurasikan untuk menukar fail, kemudian ketahui modul yang bergantung pada modul, dan kemudian ulangi langkah ini sehingga semua fail yang bergantung kepada kemasukan adalah Selepas memproses dalam langkah ini; 🎜>: Selepas rekursi selesai, setiap hasil fail diperoleh, termasuk setiap modul dan kebergantungan di antara mereka, berdasarkan kemasukan atau subkontrak Konfigurasikan ketulan blok kod yang dijana

  初始化参数

• : Keluarkan semua bahagian ke sistem fail;

  开始编译

• Prinsip kemas kini hangat Pek Web

  确定入口

  sebenarnya adalah saya sendiri
, menambah pemantauan kompilasi pek web, menambah sambungan soket web yang panjang dengan penyemak imbas, apabila fail berubah mencetuskan pek web untuk menyusun dan melengkapkan,
• . Untuk mengurangkan kos menyegarkan, ia adalah

  bukannya 编译模块 webpack-dev-server boleh menyokong kemas kini panas Nilai cincang fail yang dijana digunakan untuk membandingkan modul yang perlu dikemas kini, dan penyemak imbas kemudian melakukan penggantian panas

• 完成模块编译并输出

  Mulakan pelayan webpack-dev-server
• Buat contoh webpack

  输出完成Buat pelayan pelayan

Tambah panggilan balik acara selesai pek web

Hantar mesej kepada pelanggan selepas penyusunan selesaiBuat apl aplikasi ekspres

Tetapkan sistem fail kepada sistem fail memori开启了express应用会通过sokcet消息告诉浏览器准备刷新Tambah webpack-dev- middleware middleware 不用刷新网页刷新某个模块Middleware bertanggungjawab untuk mengembalikan fail yang dijana

Mulakan kompilasi webpack 服务端

Buat pelayan http dan mulakan perkhidmatan

• Gunakan sockjs di sebelah penyemak imbas dan Wujudkan sambungan websoket yang panjang antara pelayan
• Buat pelayan soket
• webpack-dev-server/client akan mendengar mesej hash ini
• Selepas menerima mesej ok, klien akan melaksanakan kaedah reloadApp untuk mengemas kini
• Dalam reloadApp, ia akan dinilai sama ada kemas kini panas adalah disokong. Jika ia disokong, acara webpackHotUpdate akan berlaku Jika ia tidak disokong, acara webpackHotUpdate akan berlaku. Hanya muat semula penyemak imbas secara langsung
• Dalam webpack/hot/dev-server.js, acara webpackHotUpdate. akan didengari
• Dalam kaedah semak, kaedah module.hot.check akan dipanggil
• HotModuleReplacement .runtime request Manifest
• Panggil kaedah hotDownloadManifest JsonpMainTemplate.runtime
• Panggil kaedah hotDownloadUpdateChunk JsonpMainTemplate.runtime untuk mendapatkan kod modul terkini melalui permintaan JSONP
• Patch js untuk mendapatkannya kembali atau Kaedah webpackHotUpdate

JsonpMainTemplate.runtime. js akan dipanggil dan kemudian kaedah hotAddUpdateChunk HotModuleReplacement.runtime.js akan dipanggil untuk mengemas kini kod modul secara dinamik 客户端

dan kemudian kaedah hotApply akan dipanggil untuk kemas kini panas

• Cara pembungkusan webpack menjana kod cincang
• 1 Terdapat banyak cara untuk mengira cincang dalam ekosistem pek web
• <.>
• cincang mewakili nilai cincang yang dijana dalam setiap kompilasi pek web Semua fail yang menggunakan kaedah ini mempunyai cincang yang sama. Setiap binaan menyebabkan webpack mengira cincang baharu. Chunkhash dibentuk berdasarkan fail entri dan bahagian yang berkaitan Perubahan pada fail tertentu hanya akan menjejaskan nilai cincang yang dikaitkan dengannya, tetapi tidak akan menjejaskan penciptaan contenthash bagi fail lain berdasarkan kandungan fail. Apabila kandungan fail berubah, contenthash berubah
• 2. Elakkan nilai rawak yang sama
• • pak web ada dalam 计算hash后分割chunk. 产生相同随机值可能是因为这些文件属于同一个chunk,可以将某个文件提到独立的chunk（如放入entry）

  Cara melaksanakan cache luar talian pek web bagi sumber statik

  • Apabila mengkonfigurasi pek web, kita boleh menggunakan html-webpack-plugin untuk menyuntik ke dalam Gunakan skrip dengan html untuk menyimpan sumber pihak ketiga atau kongsi secara statik dan menyuntik teg ke dalam html, seperti <% HtmlWebpackPlugin.options.loading.html %> Dalam html-webpack-plugin, anda boleh mengkonfigurasi atribut html untuk menyuntik skrip ke dalam
  .
  • Gunakan webpack-manifest-plugin dan konfigurasikan webpack-manifest-plugin untuk menjana fail manifestjson untuk membandingkan perbezaan dalam sumber js dan memutuskan sama ada untuk menggantikannya, sudah tentu, kita juga perlu menulis skrip cache
  • sebelum kami melakukannya Apabila Cl dan CD, anda juga boleh menyuntik skrip statik dengan mengedit aliran fail untuk mengurangkan tekanan pada pelayan dan meningkatkan prestasi
  • Anda boleh menggunakan fungsi berkala seperti pemalam tersuai atau html- webpack-plugin untuk menyuntik skrip storan statik bahagian hadapan secara dinamik

  webpack Apakah pemalam biasa

  • ProvidePlugin: memuatkan modul secara automatik, menggantikan memerlukan dan mengimport
  • html-webpack-pluginBoleh menjana kod html secara automatik berdasarkan templat, dan secara automatik merujuk fail css dan js
  • extract-text-webpack-plugin Ekstrak gaya yang dirujuk dalam fail js ke dalam fail css secara berasingan
  • DefinePlugin Konfigurasikan pembolehubah global pada masa penyusunan, yang berguna untuk membenarkan gelagat berbeza antara binaan mod pembangunan dan mod keluaran.
  • HotModuleReplacementPlugin Kemas kini hangat
  • optimize-css-assets-webpack-plugin Pendua css dalam komponen berbeza boleh dinyahduplikasi dengan cepat
  • webpack-bundle-analyzer Alat analisis fail berkas berkas web yang menukar fail berkas kepada Dipaparkan sebagai peta pokok boleh zum secara interaktif.
  • compression-webpack-plugin Persekitaran pengeluaran boleh menggunakan gzip untuk memampatkan JS dan CSS
  • happypack: Mempercepatkan pembinaan kod melalui model berbilang proses
  • clean-wenpack-plugin Bersihkan setiap pakej Fail yang tidak digunakan di bawah
  • speed-measure-webpack-plugin: Anda boleh melihat masa pelaksanaan setiap Pemuat dan Pemalam (keseluruhan masa pakej, masa setiap Pemalam dan Pemuat)
  • webpack-bundle-analyzer: Visualisasikan volum fail keluaran Webpack (komponen perniagaan, modul pihak ketiga yang bergantung

  Cara melaksanakan pemalam webpack

  • Intipatinya daripada webpack ialah mekanisme Penstriman peristiwa, modul teras: jadual (Sync Async) Cangkuk dibina === Penyusun (penyusunan) Penyusunan (buat berkas)
  • Objek pengkompil mewakili konfigurasi persekitaran pek web yang lengkap Objek ini digunakan sekali apabila memulakan pek web. Apabila pemalam digunakan dalam persekitaran pek web, pemalam akan menerima rujukan kepada objek pengkompil ini dan boleh digunakan untuk mengakses persekitaran pek web utama >
  Objek kompilasi mewakili sumber binaan versi. Apabila menjalankan perisian tengah persekitaran pembangunan webpack, kompilasi baharu dibuat setiap kali perubahan fail dikesan, dengan itu menghasilkan perwakilan objek kompilasi baharu Objek kompilasi juga menyediakan maklumat tentang sumber modul semasa, sumber terkumpul, fail yang diubah, dan status kebergantungan yang dijejaki, untuk dipilih dan digunakan oleh pemalam semasa melakukan pemprosesan tersuai
  • Cipta fungsi pemalam, tentukan kaedah guna pada prototaipnya dan tentukan cangkuk acara bagi pek web itu sendiri
  • Fungsi memproses secara dalaman data khusus contoh dalaman webpack
  • Selepas pemprosesan selesai, panggil panggilan balik yang disediakan oleh Webpack Function

  function MyWebpackPlugin()(
  }；
  // prototype 上定义 apply 方法
  MyWebpackPlugin.prototype.apply=function(){
  // 指定一个事件函数挂载到webpack
  compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“这是一个插件”)；
  // 功能完成调用后webpack提供的回调函数
  callback()
  })

  Apakah Pemuat yang biasa digunakan dalam pek web

  • : Output fail ke folder, dalam kod Rujuk fail output melalui URL relatif file-loader
  • : serupa dengan pemuat fail, tetapi boleh menyuntik kandungan fail ke dalam kod dalam base64 apabila fail itu sangat kecil Pergi ke url-loader
  • : Muatkan fail Peta Sumber tambahan untuk memudahkan penyahpepijatan titik putus source-map-loader.
  • : Muatkan dan mampatkan fail imej image-loader
  • : Tukar ES6 kepada ES5babel-loader
  • : Muatkan CSS, sokongan modularisasi, pemampatan, import fail dan ciri lain css-loader
  • : Suntikan kod CSS ke dalam Dalam JavaScript, CSS dimuatkan melalui operasi DOM.
  • eslint-loader: Semak kod JavaScript melalui ESLint

  Cara webpack melaksanakan caching berterusan

  • 服务端设置http缓存头(cache - kawalan)
  • pakej kebergantungan dan masa jalan ke dalam bahagian yang berbeza, 即作为splitChunk,因为他们几乎是不变的
  • 延迟加载: Menggunakan import()方式, fail yang dimuatkan secara dinamik boleh dibahagikan kepada bahagian bebas untuk mendapatkan chunkhash anda sendiri
  • 保持hash值的稳定: Perubahan dalam proses penyusunan dan interkom fail harus cuba untuk tidak menjejaskan pengiraan cincang fail lain Untuk isu tidak stabil ID digital tambahan yang dijana oleh versi pek web yang lebih rendah, anda boleh menggunakan hashedModuleIdsPlugin untuk menjana berasaskan. pada laluan fail

  Bagaimana untuk menggunakan pek web untuk mengoptimumkan prestasi bahagian hadapan?

  ⽽ Mengoptimumkan prestasi bahagian hadapan dengan pek web merujuk kepada mengoptimumkan hasil keluaran pek web supaya hasil pembungkusan akhir berjalan dengan cepat dan cekap dalam penyemak imbas.

  • 压缩代码: Padamkan kod berlebihan, ulasan, permudahkan penulisan kod, dsb. Anda boleh menggunakan UglifyJsPlugin dan ParallelUglifyPlugin webpack untuk memampatkan fail JS dan menggunakan cssnano (css-loader?minimize) untuk memampatkan css
  • 利⽤CDN加速: Semasa proses binaan, tukar laluan sumber statik yang dirujuk kepada Laluan yang sepadan pada CDN. Anda boleh menggunakan parameter output webpack dan parameter publicPath bagi setiap pemuat untuk mengubah suai laluan sumber
  • Tree Shaking: Padamkan segmen yang tidak akan pernah dilihat dalam kod. Ini boleh dicapai dengan menambahkan parameter --optimum-minimize apabila memulakan pek web
  • Code Splitting: Bahagikan kod kepada ketulan mengikut dimensi atau komponen penghalaan, supaya ia boleh dimuatkan atas permintaan dan boleh. digunakan sepenuhnya. Cache penyemak imbas
  • 提取公共第三⽅库: Pemalam SplitChunksPlugin digunakan untuk mengekstrak modul awam Cache penyemak imbas boleh digunakan untuk menyimpan kod awam ini yang perlu ditukar dengan kerap
  <. . data-id="heading-10"> boleh menganalisis dalam keadaan ;
  • menggunakan spesifikasi 摇树优化 生产环境默认开启
  Modul ES6 untuk memperkenalkan
  • , jadi 代码不运行 不需要的代码
  Analisis statik aliran program, menentukan modul dan pembolehubah yang tidak digunakan atau dirujuk, dan kemudian memadamkan kod yang sepadan
  • es6模块
    • 静态分析编译的时候正确判断到底加载了那些模块Alamat asal : https: //juejin.cn/post/7002839760792190989
    • Pengarang: Front-end_Maverick_to Rhino
  Cadangan tutorial berkaitan: "
  Webpack Tutorial>"

Atas ialah kandungan terperinci 10 soalan temuduga webpack, berapa banyak yang anda boleh jawab?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!