Cara membungkus tapak statik yang mudah menggunakan webpack

Webpack: Melancarkan Pembangunan Tapak Statik

Webpack, modul modul JavaScript yang sangat popular (lebih daripada 55,000 bintang GitHub!), Selalunya dikaitkan dengan projek berskala besar menggunakan rangka kerja seperti React atau Angular. Walau bagaimanapun, keupayaan penggabungannya sama -sama memberi manfaat kepada tapak statik yang lebih kecil. Artikel ini menunjukkan cara memanfaatkan webpack untuk membuat bundle yang dioptimumkan untuk tapak statik yang mudah, meningkatkan prestasi dan mengurangkan permintaan HTTP.

Kelebihan Utama Menggunakan Webpack Untuk Laman Statik:

• Permintaan HTTP yang dikurangkan: Menyatukan pelbagai aset (JavaScript, CSS, imej) ke dalam bundle yang lebih sedikit, mempercepatkan masa beban halaman.
• Minification: mengurangkan saiz fail dengan mengeluarkan aksara yang tidak perlu dari kod.
• Transpilation: membolehkan penggunaan sintaks JavaScript moden (ES6) sambil memastikan keserasian dengan pelayar yang lebih tua (ES5).
• Pengurusan Aset Ringkas: Menyediakan pendekatan berstruktur untuk menguruskan aset yang pelbagai.
• Automasi: mengintegrasikan dengan lancar dengan skrip NPM untuk proses binaan automatik.

Menyediakan Webpack:

1. prasyarat: node.js dan npm (atau pengurus versi nod seperti NVM) mesti dipasang.
Persediaan Projek
2. Buat direktori projek dan klon projek sampel (mis., Dari GitHub) atau buat fail asas anda sendiri HTML, CSS, dan JavaScript.
3. pemasangan webpack: Pasang webpack dan CLI menggunakan . npm install webpack webpack-cli --save-dev
4. Struktur direktori: Buat folder untuk memegang output yang dibundel. dist

Konfigurasi Webpack Asas ():

webpack.config.js Konfigurasi ini menentukan titik masuk (), mod binaan (

), dan direktori output dan nama fail.

<code class="language-javascript">module.exports = {
  entry: './src/js/app.js',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
};</code>

app.js mengautomasikan proses binaan: development

tambahkan skrip binaan ke :

Sekarang, berjalan package.json akan melaksanakan proses binaan webpack.

<code class="language-json">"scripts": {
  "build": "webpack"
}</code>

termasuk bundle dalam html anda: npm run build

Gantikan rujukan kepada fail JavaScript individu dalam HTML anda dengan fail (terletak di folder ).

bundle.js Bundling Aset Tambahan (CSS, Imej, Fon): dist

Webpack menggunakan pemuat untuk mengendalikan jenis fail yang berbeza. Untuk membungkus CSS, pasang dan (

) dan tambahkan peraturan ke

: css-loader

<code class="language-javascript">module.exports = {
  entry: './src/js/app.js',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
};</code>

untuk imej dan fon, url-loader berguna (). npm install --save-dev url-loader

Pengoptimuman pengeluaran:

Tukar ke

dalam

untuk membolehkan pengoptimuman dan pengoptimuman lain. Untuk pengoptimuman CSS selanjutnya, pertimbangkan untuk menggunakan mode: 'production' dan webpack.config.js. optimize-css-assets-webpack-plugin terser-webpack-plugin

Teknik Lanjutan (Gambaran Keseluruhan Singkat):

Pembahagian kod:
• Bagikan kod anda ke dalam ketulan yang lebih kecil untuk meningkatkan masa beban.
Penggantian Modul Panas (HMR):
• Perubahan kod kemas kini dalam penyemak imbas tanpa muat semula halaman penuh (memerlukan pelayan dev Webpack).
Bundle yang berbeza untuk halaman yang berbeza:
• Buat bundle berasingan untuk halaman yang berbeza untuk mengurangkan jumlah kod yang dimuat turun untuk setiap halaman.
Panduan ini memberikan pemahaman asas untuk menggunakan webpack untuk pembangunan tapak statik. Penjelajahan lanjut ciri -ciri canggih dan plugin akan membuka kunci pengoptimuman dan kecekapan yang lebih besar. Ingatlah untuk berunding dengan dokumentasi webpack rasmi untuk maklumat terperinci dan amalan terbaik terkini.

Atas ialah kandungan terperinci Cara membungkus tapak statik yang mudah menggunakan webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!