nodejs construit le webpack

Avec le développement rapide de la technologie front-end, les outils de développement front-end deviennent de plus en plus complexes. L'un des outils importants est webpack, qui est un outil d'empaquetage de modules efficace qui permet aux développeurs de gérer les modules plus facilement pendant le développement. Cet article se concentrera sur la façon d'utiliser nodejs pour créer du webpack.

1. Compréhension préliminaire de nodejs et webpack

Avant de présenter comment utiliser nodejs pour créer webpack, comprenons d'abord ce que sont nodejs et webpack.

1.1 Qu'est-ce que nodejs

Node.js est un environnement d'exécution JavaScript basé sur le moteur Chrome V8. Il utilise un modèle d'E/S efficace et non bloquant. Le développement de bout en bout fournit un environnement de développement efficace et léger. Node.js permet à JavaScript de s'exécuter côté serveur, afin que nous puissions utiliser le langage JavaScript pour développer des applications côté serveur.

1.2 Qu'est-ce que webpack

Webpack est un bundler de modules statiques pour les applications JavaScript modernes. Lorsque Webpack traite une application, il crée en interne un graphique de dépendances qui contient chaque module requis par l'application et génère un ou plusieurs bundles. Ces bundles sont des fichiers statiques qui peuvent être chargés dans le navigateur.

2. Installez nodejs

Avant de commencer à utiliser nodejs pour créer du webpack, nous devons installer nodejs dans notre système. Nous pouvons télécharger le programme d'installation depuis le site officiel https://nodejs.org/en/ et le processus d'installation est très simple.

3. Initialiser npm

Après avoir installé nodejs, nous devons utiliser npm (gestionnaire de packages Node.js) dans notre projet. Nous pouvons initialiser npm en exécutant la commande suivante dans le répertoire racine du projet :

npm init

Par la suite, npm nous posera quelques questions, telles que le nom du projet, l'auteur, la version, etc. Suivez simplement les invites et entrez le contenu pertinent. Une fois terminé, npm générera un fichier package.json contenant les informations de base et les informations de dépendance d'un projet.

4. Installer le webpack

Une fois npm initialisé, nous devons installer le webpack. Nous pouvons l'installer globalement ou localement.

4.1 Installer le webpack globalement

Nous pouvons exécuter la commande suivante pour installer le webpack globalement :

npm install webpack -g

Cela créera un webpack global qui pourra être installé n'importe où dans le projet, utilisation locale.

4.2 L'installation partielle du webpack

L'installation partielle installera le webpack dans le dossier node_modules du projet. Nous pouvons installer webpack selon les étapes suivantes :

1. Exécutez la commande suivante dans le répertoire racine du projet pour créer un fichier package.json vide :

npm init -y

# 🎜🎜#

Exécutez la commande suivante dans le répertoire racine du projet pour installer webpack et webpack-cli :

2. npm install webpack webpack-cli --save-dev

Dans la commande ci-dessus, --save-dev signifie ajouter dépendances au développement dans les dépendances (devDependencies).

Une fois terminé, nous pouvons trouver webpack et webpack-cli dans le dossier node_modules du projet.

5. Construire le webpack

Après avoir installé le webpack, nous pouvons commencer à créer le webpack. Avant de commencer, nous devons créer un fichier d'entrée et un fichier de sortie pour webpack.

5.1 Créer un fichier d'entrée

Nous pouvons créer un fichier nommé index.js dans le répertoire racine du projet en tant que fichier d'entrée, qui doit importer d'autres fichiers JavaScript. Dans cet exemple, nous importons simplement un simple fichier JavaScript appelé hello.js :

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

console.log(hello());

5.2 Créez un fichier de sortie

Nous devons créer un fichier pour la sortie. Nous pouvons créer un dossier dist dans le répertoire racine du projet et nommer le fichier de sortie bundle.js :

// dist/bundle.js

5.3 Créez un fichier de configuration webpack

Ensuite, nous Un fichier de configuration simple doit être créé pour webpack. Créez un fichier nommé webpack.config.js dans le répertoire racine du projet et saisissez le contenu suivant :

const path = require('path');

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

Dans le code ci-dessus, nous avons d'abord importé le module Path de Node.js pour créer le chemin, et puis nous définissons le chemin et le nom de fichier d'un fichier de sortie qui regroupera notre JavaScript. Entry spécifie le point d'entrée où Webpack commencera à construire, qui trouvera le graphe de dépendances interne de notre application.

6. Exécutez webpack

Maintenant que nous avons terminé la création de webpack, nous pouvons exécuter webpack pour créer notre application.

6.1 Exécuter Webpack globalement

Si nous avons déjà installé Webpack globalement, nous pouvons saisir la commande suivante dans l'invite de commande :

webpack

#🎜🎜 #Après l'exécution Avec cette commande, webpack utilisera le fichier de configuration webpack dans le répertoire racine du projet pour compiler le fichier d'entrée index.js dans un fichier bundle bundle.js et l'enregistrera dans le dossier dist.

6.2 Exécuter webpack localement

Si nous avons uniquement installé webpack et webpack-cli auparavant, nous pouvons exécuter webpack en entrant la commande suivante dans l'invite de commande : #🎜 🎜#

npx webpack

Après avoir exécuté cette commande, webpack exécutera la version locale que nous avons installée et construira notre application avec la configuration dans le fichier webpack.config.js.

7. Résumé

Cet article décrit principalement comment utiliser nodejs pour créer le webpack, et termine l'initialisation et l'installation du webpack, la création des fichiers d'entrée et des fichiers de sortie, et la création du webpack fichiers de configuration. Ainsi que toutes les étapes pour exécuter webpack pour créer notre application. L'utilisation de webpack peut optimiser notre efficacité de développement front-end et nous permettre de gérer et d'organiser les modules plus facilement pendant le développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!