Maison >interface Web >tutoriel CSS >Introduction à la méthode d'établissement d'une démo et de configuration de l'environnement Webpack

Introduction à la méthode d'établissement d'une démo et de configuration de l'environnement Webpack

不言original: 2018-08-18 15:15:332579parcourir

Cet article vous apporte une introduction à la méthode de mise en place d'une démo pour configurer l'environnement webpack. Il a une certaine valeur de référence. J'espère qu'il sera utile. toi.

1. Créez une démo

2. Entrez dans le répertoire webpack_demo créé pour créer un dossier dist (pour la production) et un dossier src (pour l'environnement de développement)

src : utilisé pour stocker le code javascript que nous avons écrit, qui peut être simplement compris comme un module écrit en JavaScript.

dossier dist : utilisé pour stocker les fichiers que les navigateurs peuvent lire. Il s'agit d'un fichier packagé par webpack.

3. Écrivez les fichiers du programme :

Créez manuellement un fichier index.html sous le fichier dist

/dist/index.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>webpack</title></head><body> 
    <p id="title"></p> 
    <script src="./bundle.js"></script></body></html>

Explication : Le fichier bundle.js est introduit ici. Plus tard, webpack peut être utilisé pour générer un fichier d'entrée Entry.js sous src

/src/entry. js :

document.getElementById(‘title’).innerHTML=’Hello Webpack’;

Puis webpack packaging :

1. Saisissez : webpack src dans le terminal dans vs code /entry. .js dist/bundle.js Après une exécution réussie, le fichier bundle.js sera généré dans le répertoire dist et les informations Hello Webpack seront affichées dans le navigateur

2. Webpack peut également être packagé comme ceci src/entry .js –output dist/bundle.js –mode development

générera le fichier bundle.js dans le répertoire dist

Installer globalement le serveur live :

npm install -g live-server

Une fois l'installation terminée, exécutez live-server dans le terminal et les informations Hello Webpack seront affichées dans le navigateur

Recommandations associées :

Webpack utilise les étapes de ligne de commande pour l'installation

Quels sont les sélecteurs CSS ? Résumé de l'utilisation du sélecteur CSS

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!

JavaScript css html webpack JS 选择器

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Étapes pour installer Webpack à l'aide de la ligne de commandeArticle suivant：Étapes pour installer Webpack à l'aide de la ligne de commande

Articles Liés

Voir plus