Käyttöliittymäsuunnittelu: Verkkopaketin määritysopas

2024-07-12

Käyttöliittymäsuunnittelu: Verkkopaketin määritysopas

Ystävät, tänään aiomme puhua Webpackista, jota ihmiset rakastavat ja vihaavat. Kyllä, se on rakennustyökalu, joka on määritetty niin, että haluat murskata näppäimistösi, mutta et voi elää ilman sitä. Älä huoli, seuraa minua ja takaan, että sinusta tulee Webpack-aloittelijasta konfigurointipäällikkö!

Mikä on Webpack?

Yksinkertaisesti sanottuna Webpack on staattinen moduulipakkaustyökalu nykyaikaisille JavaScript-sovelluksille. Kun Webpack käsittelee sovellusta, se rakentaa sisäisesti riippuvuuskaavion, joka kartoittaa kaikki projektin tarvitsemat moduulit ja luo yhden tai useamman nipun.

Kuulostaako ylevältä? Itse asiassa se on järjestää ja pakata sotkuiset kooditiedostot tiedostoiksi, joita selain voi ymmärtää ja käyttää. Se on kuin erittäin ahkera siivooja, joka pitää kaikki kodin vaatteet, kirjat ja lelut kunnossa.

Peruskokoonpano

Katsotaanpa ensin Webpackin peruskokoonpanoa.Luodawebpack.config.js Tiedosto, tämä on määrityspohjamme:

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

tässä,entry määrittää sovelluksen sisääntulokohdan,output Kertoo Webpackille, mihin sen luomat paketit tulostetaan ja kuinka nämä tiedostot nimetään.

Loader: Anna Webpackin ymmärtää erilaisia tiedostoja

Webpack itse ymmärtää vain JavaScript- ja JSON-tiedostoja. Lataajien avulla Webpack voi käsitellä muun tyyppisiä tiedostoja ja muuntaa ne kelvollisiksi moduuleiksi sovellusten käyttöön.

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

Näitkö? Kerromme Webpackille: "Hei, veli, käytä style-loaderia ja css-loaderia .css-tiedostojen käsittelyyn ja tiedostolatausohjelmaa kuvien käsittelyyn."

Plugins: Webpackin taika

Lisäosat ovat Webpackin selkäranka. Niitä voidaan käyttää useiden tehtävien hoitamiseen pakkauksen optimoinnista ja pakkaamisesta ympäristön muuttujien uudelleenmäärittelyyn.

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

Täällä käytämme puhdistamiseen CleanWebpackPluginia /dist kansio ja HtmlWebpackPlugin luodaksesi HTML-tiedoston. Se on kuin asentaisi Webpackiin kaksi oikeanpuoleista avustajaa, joista toinen vastaa siivouksesta ja toinen huoneen sisustamisesta.

Toimintatapa: kehitys vai tuotanto?

Webpack tarjoaa mode Määritysvaihtoehdot, jotka käskevät Webpackin käyttämään sisäänrakennettuja optimointeja vastaavaa tilaa varten:

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

Kun asetuksena on "tuotanto", Webpack ottaa automaattisesti käyttöön joukon optimointilaajennuksia, kuten JS-koodin pakkaamisen. "Kehitys"-tila keskittyy nopeisiin rakenteisiin ja loistavaan kehityskokemukseen. Se on kuin laittaisi kaksi hattua päähän Webpackille, joista toinen on työhattu ja toinen lomahattu.

Kehityspalvelin: Kuumien päivitysten jännitys

Käytä webpack-dev-serveria tarjotaksesi yksinkertaisen verkkopalvelimen, joka voidaan ladata uudelleen reaaliajassa:

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

Jos muokkaat koodia tämän määrityksen jälkeen, selain päivittyy automaattisesti. Se on kuin laittaisit turboahtimen kehitysprosessiisi!

Koodierottelu: älä laita kaikkia munia samaan koriin

Koodin jakaminen on yksi Webpackin houkuttelevimmista ominaisuuksista. Sen avulla voit jakaa koodisi useiksi paketeiksi, jotka voidaan sitten ladata pyynnöstä tai rinnakkain.

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

Tämä kokoonpano kertoo Webpackille: "Hei, auta minua purkamaan yhteinen koodi ja pakata se erikseen. Näin voidaan välttää moduulien toistuva lataaminen ja pienentää pääpaketin kokoa." Se on kuin pakkaisisit matkalaukkusi uudelleen ja laittaisit usein käytetyt tavarat sinne, missä ne ovat helpoimmin saatavilla.

Puiden ravistaminen: Ylimääräisten oksien ja lehtien ravistaminen

Tree Shaking on termi, jota käytetään yleisesti kuvaamaan viittaamattoman koodin poistamista JavaScript-kontekstista.

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

Tämä kokoonpano ottaa automaattisesti käyttöön Tree Shakingin tuotantotilassa. Se analysoi koodisi selvittääkseen, mitä koodia ei käytetä, ja sitten "leikkaa" nämä hyödyttömät koodit kuin puutarhuri, joka karsii puita.

Tee yhteenveto

Okei, kaiken tämän viulun jälkeen sinulla pitäisi olla kattava käsitys Webpack-määrityksistä. Peruskokoonpanosta lisäominaisuuksiin käsittelimme Webpackin päätoiminnot. Muista, että Webpack on kuin tehokas Sveitsin armeijan veitsi, ja sen oikea käyttö voi parantaa kehitystehokkuuttasi ja sovelluksesi suorituskykyä huomattavasti.

Tietysti Webpackin maailma on paljon enemmän. Sinua odottavat edistyneemmät ominaisuudet, kuten laiska lataus, esilataus, välimuisti jne. Nämä perusasiat hallittuasi voit kuitenkin jo ylpeänä sanoa: "Olen myös Webpack-konfigurointimestari!"

Lopuksi, älä unohda tarkistaa Webpackin virallista dokumentaatiota usein. Koska käyttöliittymän nopeasti muuttuvassa maailmassa eilen paras käytäntö voi olla vanhentunutta tänään. Jatka oppimista ja tutkimista, niin voit mennä yhä pidemmälle tiellä eturivin suunnitteluun.

Ota nyt näppäimistö käteesi ja aloita Webpack-määritysmatka! Muista, että jokainen virhe on ponnahduslauta matkallasi mestariksi. Tulkaa, lyö työntekijöitä!

Haiman haastatteluminiohjelma

Se sisältää viimeisimmän haastattelukokemuksen jakamisen, todellisten haastattelukysymysten analyysin, yli 2000 kysymyspankin ja yksityiskohtaiset selitykset etu- ja taustahaastattelun teknisistä oppaista riippumatta siitä, oletko haastattelussa koulun rekrytointia tai sosiaalista rekrytointia varten parantaaksesi ohjelmointitaitojasi voit kohdata sen rauhallisesti~

kivestä. Tule, lyö työntekijöitä!

Haiman haastatteluminiohjelma

[Ulkoisten linkkien kuvia siirretään...(img-LBHUGtbe-1720689041341)]

Teknologian jakaminen