nodejs membina webpack

Dengan perkembangan pesat teknologi bahagian hadapan, alatan pembangunan bahagian hadapan menjadi semakin kompleks. Salah satu alat penting ialah webpack, yang merupakan alat pembungkusan modul yang cekap yang membolehkan pembangun mengurus modul dengan lebih mudah semasa pembangunan. Artikel ini akan menumpukan pada cara menggunakan nodejs untuk membina webpack.

1. Pemahaman awal tentang nodej dan webpack

Sebelum memperkenalkan cara menggunakan nodejs untuk membina webpack, mari kita fahami dahulu apa itu nodej dan webpack.

1.1 Apakah itu nodejs

Node.js ialah persekitaran berjalan JavaScript berdasarkan enjin Chrome V8 Ia menggunakan model I/O tidak menyekat dipacu peristiwa yang cekap untuk menyediakan kembali-. akhir pembangunan Persekitaran pembangunan yang cekap dan ringan. Node.js membolehkan JavaScript dijalankan pada bahagian pelayan, supaya kami boleh menggunakan bahasa JavaScript untuk membangunkan aplikasi bahagian pelayan.

1.2 Apakah itu webpack

Webpack ialah pengikat modul statik untuk aplikasi JavaScript moden. Apabila Webpack memproses aplikasi, ia secara dalaman membina graf pergantungan yang mengandungi setiap modul yang diperlukan oleh aplikasi dan menjana satu atau lebih berkas. Himpunan ini ialah fail statik yang boleh dimuatkan dalam penyemak imbas.

2. Pasang nodejs

Sebelum kami mula menggunakan nodejs untuk membina webpack, kami perlu memasang nodejs dalam sistem kami. Kami boleh memuat turun pemasang dari laman web rasmi https://nodejs.org/en/ dan proses pemasangan adalah sangat mudah.

3. Mulakan npm

Selepas memasang nodej, kami perlu menggunakan npm (pengurus pakej Node.js) dalam projek kami. Kita boleh memulakan npm dengan menjalankan arahan berikut dalam direktori akar projek:

npm init

Selepas itu, npm akan bertanya kepada kami beberapa soalan, seperti nama projek, pengarang, versi, dll. Cuma ikut arahan dan masukkan kandungan yang berkaitan. Apabila selesai, npm akan menjana fail package.json yang mengandungi maklumat asas dan maklumat pergantungan projek.

4. Pasang webpack

Selepas npm dimulakan, kita perlu memasang webpack. Kami boleh memasangnya secara global atau tempatan.

4.1 Pasang webpack secara global

Kami boleh memasang webpack secara global dengan menjalankan arahan berikut:

npm install webpack -g

Ini akan mencipta webpack global yang boleh digunakan di mana-mana dalam projek.

4.2 Pemasangan separa pek web

Pemasangan separa akan memasang pek web dalam folder node_modules projek. Kita boleh memasang webpack seperti berikut:

1. Jalankan arahan berikut dalam direktori akar projek untuk mencipta fail package.json kosong:

npm init -y

2. Dalam projek root Jalankan arahan berikut dalam direktori untuk memasang webpack dan webpack-cli:

npm install webpack webpack-cli --save-dev

Dalam arahan di atas, --save-dev bermaksud menambah kebergantungan pada kebergantungan pembangunan (devDependencies).

Setelah selesai, kami boleh mencari webpack dan webpack-cli dalam folder node_modules projek.

5. Bina webpack

Selepas memasang webpack, kita boleh mula membina webpack. Sebelum kita mula, kita perlu mencipta fail masukan dan fail keluaran untuk webpack.

5.1 Cipta fail masukan

Kami boleh mencipta fail bernama index.js dalam direktori akar projek sebagai fail masukan, yang perlu mengimport fail JavaScript lain. Dalam contoh ini, kami hanya mengimport fail JavaScript ringkas yang dipanggil hello.js:

// index.js
import hello from './hello.js';

console.log(hello());

5.2 Mencipta fail output

Kami perlu mencipta fail untuk output. Kita boleh mencipta folder dist dalam direktori akar projek dan menamakan berkas output.js:

// dist/bundle.js

5.3 Buat fail konfigurasi webpack

Seterusnya, kita perlu mencipta fail konfigurasi webpack A fail konfigurasi mudah. Cipta fail bernama webpack.config.js dalam direktori akar projek dan masukkan kandungan berikut:

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Dalam kod di atas, kami mula-mula mengimport modul Path Node.js untuk mencipta laluan, dan kemudian kami ditakrifkan Laluan dan nama fail fail output akan digabungkan bersama JavaScript kami. entri menentukan titik masuk tempat webpack akan mula dibina, yang akan menemui graf pergantungan dalaman aplikasi kami.

6. Jalankan webpack

Sekarang setelah kami selesai menyediakan webpack, kami boleh menjalankan webpack untuk membina aplikasi kami.

6.1 Jalankan webpack secara global

Jika kami telah memasang webpack secara global sebelum ini, kami boleh memasukkan arahan berikut dalam command prompt:

webpack

Selepas menjalankan arahan ini, Webpack akan menggunakan fail konfigurasi webpack dalam direktori akar projek untuk menyusun fail masukan index.js ke dalam fail bundle.js dan menyimpannya ke folder dist.

6.2 Menjalankan webpack secara setempat

Jika kita hanya memasang webpack dan webpack-cli sebelum ini, kita boleh menjalankan webpack dengan memasukkan arahan berikut dalam command prompt:

npx webpack

Selepas melaksanakan arahan ini, webpack akan menjalankan versi tempatan yang kami pasang dan membina aplikasi kami dengan konfigurasi dalam fail webpack.config.js.

7. Ringkasan

Artikel ini menerangkan terutamanya cara menggunakan nodejs untuk membina webpack, dan melengkapkan permulaan, pemasangan, penciptaan fail kemasukan dan fail keluaran webpack, penciptaan fail konfigurasi webpack, dan menjalankan webpack ke Semua langkah untuk membina aplikasi kami. Menggunakan webpack boleh mengoptimumkan kecekapan pembangunan bahagian hadapan kami dan membolehkan kami mengurus dan menyusun modul dengan lebih mudah semasa pembangunan.

Atas ialah kandungan terperinci nodejs membina webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!