webpack skill Day02

Revue

• Question: Que faire si le fichier js exporté doit être affiché dans un chemin absolu?
  
  
• Question: l'exécution du projet npm run serve in the vue ouvre un serveur localhost: 8080, à travers lequel vous pouvez accéder à notre projet

configuration du serveur de développement webpack

cnpm i webpack-dev-server -g
cnpm i webpack-dev-server -D

A ce moment sur la ligne de commande, vous pouvez démarrer le serveur via webpack-dev-server, le numéro de port par défaut est 8080

• Si vous souhaitez modifier le port par défaut, si vous exécutez avec succès, il ouvrira automatiquement le navigateur par défaut pour s'exécuter, définir le proxy du serveur, etc ...

Configurer Developer Server

convertisseur de webpack

• css, sass, less, stylus, js advanced grammar, font files ... en tant que module, vous devez utiliser un convertisseur

fichier css

• Configurer les options de l'analyseur

cnpm i style-loader css-loader -D

fichier sass

• src / scss / main.scss
  
• Configurer les options de l'analyseur

cnpm i node-sass sass-loader -D

Gérer moins de fichiers

• src / less / main.less
  
  
• Configurer les options de l'analyseur

cnpm i less less-loader -D

fichier de stylet

• src / stylus / main.stylus
  
• Configurer les options de l'analyseur

cnpm i stylus stylet-loader -D

syntaxe avancée js

• Certaines grammaires avancées de JS ne peuvent pas être analysées directement en répétant les notes, et elles doivent être converties pour être utilisées

cnpm i @ babel / core babel-loader -D

Si le style contient une image d'arrière-plan

cnpm i file-loader chargeur d'url -D

Question: Le nom du suffixe peut être omis dans le projet vue, et le symbole @ pointe vers le répertoire du fichier src

• vue
• réagir

Vue et react utilisent beaucoup de syntaxe es6 et supérieure,
créent le fichier .babelrc dans le répertoire racine du projet, installent les dépendances et configurent comme suit

cnpm i @ babel / preset-env -D (syntaxe avancée de js)
cnpm i @ babel / preset-react -D (development react)

Copiez webpack.config.js et package.json et ajoutez le fichier .babelrc à votre fichier de projet, effectuez les dépendances d'installation, créez votre propre dossier src et votre dossier public, et ajoutez le fichier d'entrée comme index.js, dossier public Ci-dessous est index.html

projet webpack build vue

cnpm i vue -S
cnpm i vue-template-compiler vue-loader -D

• Traitement du fichier avec ajout du suffixe vue
  
  
  
• src / App.vue
  
• src / index.js
  
• Routage de test

cnpm i vue-router -S

• src / router / index.js
  
• views/Home.vue + Kind.vue + Cart.vue
  
• src / index.js
  
• src / App.vue