Introduction à la méthode d'établissement d'une démo et de configuration de l'environnement Webpack-tutoriel CSS-php.cn

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

不言

Libérer： 2018-08-18 15:15:33

original

2546 Les gens l'ont consulté

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>

Copier après la connexion

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’;

Copier après la connexion

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