webpack frames

Badge

• chèque && format
• webpack1-ie8
• webpack3-réagir
• webpack3-vue
• webpack4-réagir
• webpack4-vue

Instructions de mise à jour

1. Les dossiers contenus dans webpack4-vue et webpack3-vue sont exactement les mêmes. Veuillez les copier vous-même si nécessaire.
2. Les dossiers inclus dans webpack4-react et webpack3-react sont exactement les mêmes. Veuillez les copier vous-même si nécessaire.
3. La différence entre webpack 2 et 3 est très faible, en gros, ce n'est pas un problème de remplacer directement 2 par 3. Seules les versions 1/3/4 sont abordées ici, le document officiel de migration.
4. L'environnement de développement a été rechargé à chaud. Si vous souhaitez que l'environnement de développement soit compatible avec ie11 ou une version antérieure, veuillez effacer le rechargement à chaud.
   • Supprimez react-hot-loader/babel du fichier plugins .babelrc
   • Supprimez react-hot-loader de devDependencies dans package.json
   • devServer.inline dans config/opt.dev.js doit être faux (vue n'a qu'à modifier ce point)
   • Supprimer react-hot-loader du code
5. L'environnement de développement prend déjà en charge l' mock api frontale, qui lira automatiquement les fichiers sous src/mock et effectuera des mises à jour à chaud. La logique du code se trouve dans config/mock.js , qui contient example .
6. Les versions de vue et vue-template-compiler doivent être totalement cohérentes, sinon il y aura des erreurs imprévues.
7. Les configurations de webapck134,react,vue dans config ont été unifiées. Il suffit aux différents projets de modifier opt.self.js
8. Il y a des omissions dans la description readme . Veuillez accéder au fichier pour lire les commentaires du code. Le point clé est que les fichiers du répertoire config ont des commentaires et des adresses officielles du document de référence.
9. devDependencies sont utilisées pour placer les dépendances de la version verrouillée. dependencies sont les dernières dépendances puisqu'elles n'ont pas besoin d'être publiées sur npm, cette classification est plus arbitraire et même erronée. Si vous souhaitez publier, veuillez faire une distinction. Baidu pour plus de détails spécifiques.
10. Étant donné que DllPlugin et CommonsChunkPlugin或splitChunks ont des fonctions en double et que le premier doit exécuter une commande webpack au préalable, il peut être simplement remplacé par externals . Ce dernier a un grand espace utilisable et peut être décompressé librement pour rendre la taille du fichier plus uniforme. , ce qui suit sera DllPlugin n'est plus utilisé

Préparation environnementale

1. Définir npm config set registry https://registry.npm.taobao.org
2. Exécutez npm i -g npminstall en tant qu'administrateur
3. Entrez le répertoire actuel avec la ligne de commande et exécutez npminstall -c
4. Si une erreur se produit, les solutions courantes sont les suivantes :
   • Exécutez npm cache clean -f et npm cache verify -f en tant qu'administrateur
   • Supprimer le répertoire node_modules
   • Réexécutez npminstall -c
   • Enfin, passez à un meilleur réseau et mettez à niveau node et npm
5. Notes d'utilisation :
   • npminstall -c et npm install ne sont pas compatibles. Le premier est beaucoup plus rapide que le second, mais ils ne peuvent pas être utilisés ensemble.
   • Le passage à l'utilisation nécessite la suppression du dossier node_modules
   • S'il y a un problème avec node-v12.0.0 , veuillez ne pas le mettre à niveau pour l'instant. La dernière version de node-v12 n'a aucun problème.
   • Parfois, des erreurs d'empaquetage ou des erreurs de codage inexplicables se produisent. Supprimez node_modules et réessayez.

Démarrage de l'environnement de développement

1. npm start
   • Veuillez l'utiliser lorsque vous avez besoin d'aide, c'est-à-dire
   • npm run env -- FOR_IE=1 npm start
2. Ouvrez http://localhost:8888 dans le navigateur

Déploiement de l'environnement de production

1. npm run app
   • Veuillez l'utiliser lorsque vous avez besoin d'aide, c'est-à-dire
   • npm run env -- FOR_IE=1 npm run app
2. Copiez simplement le contenu du dossier dist sur le serveur

Ajouter d'autres fonctionnalités

1. npm run report pour afficher la composition du bundle de packages de production
   • Veuillez l'utiliser lorsque vous avez besoin d'aide, c'est-à-dire
   • npm run env -- FOR_IE=1 npm run report
2. npm run debug ajoute le démarrage du débogage du point d'arrêt, port 7777
   • Veuillez l'utiliser lorsque vous avez besoin d'aide, c'est-à-dire
   • npm run env -- FOR_IE=1 npm run debug

Mettre à jour le package.json

• Installer npm i -g npm-check-updates
• Exécutez ncu (view) ncu -u (update) dans le répertoire package.json

Utiliser le rechargement à chaud React-Hot-Loader

Documentation officielle

1. Ajoutez react-hot-loader aux devDependencies dans package.json
2. devServer.inline de webpack.cfg.dev.js doit être true
3. Ajoutez react-hot-loader/babel aux plugins de .babelrc
4. Ajoutez --hot à la commande de démarrage, n'utilisez pas HotModuleReplacementPlugin en même temps
5. Le composant racine export est modifié et react-hot-loader est introduit avant react

 import { hot } from 'react-hot-loader' ;
export default hot ( module ) ( App ) ;

Remarque : Seule la version 4.3.12 prend en charge ie8+react@0 et nécessite une petite modification, qui a été effectuée dans le script.

Traitement d'images

• Image ordinaire => https://tinypng.com图片压缩=> url-loader (inférieur à 4 Ko)
• image svg => https://github.com/svg/svgo svg压缩=> svg-url-loader

 // 建议4kb以下使用,较大文件建议用file-loader
const src = require ( "!svg-url-loader?noquotes!./x.svg" ) ;

webpack 3 4 prend en charge la recherche ie8

1. Le code empaqueté par DllPlugin n'a pas été converti et présente très probablement des problèmes d'incompatibilité, de sorte que la vitesse d'empaquetage ne peut pas être grandement améliorée.
2. Le principe du rechargement à chaud est Object.defineProperty, qui n'est pas pris en charge par ie8
3. Impossible d'utiliser le dernier réactif/antd, ré[email protected]/[email protected] ne prend en charge que ie8, vue ne prend pas directement en charge ie8 ;
4. À ce stade, presque tous les avantages du webpack 3 4 ne sont pas pris en charge. Webpack 3 4 n'est pas pris en compte pour le moment et la compatibilité de la version en ligne n'est pas très bonne.
5. Si vous souhaitez vraiment utiliser Webpack 3 4 pour être compatible avec ie8, les éléments suivants sont fournis à titre de référence, mais n'ont pas été testés (ils devraient tous avoir des problèmes)
   • https://github.com/ediblecode/webpack4-ie8
   • https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

Référence de spécification du code

• http://eslint.cn/docs/rules eslint规则文档
• https://github.com/yuche/javascript js规范中文版
• https://github.com/airbnb/javascript js规范es5,es6,react
• https://github.com/JasonBoy/javascript/tree/master/react react规范中文版
• https://github.com/sivan/javascript-style-guide/tree/master/es5 es5规范中文版
• Configurations esling couramment utilisées eslint-config-egg eslint-config-react-app eslint-config-ali

Habitudes personnelles de codage (différentes d'une personne à l'autre, choisissez ce qui vous semble juste, à titre de référence seulement)

A propos de laisser une ligne vide à la fin du fichier

• Les individus suivent leurs habitudes et le développement de l'équipe est unifié grâce à eslint --fix

À propos de l'indentation du code

• Les individus suivent leurs habitudes et le développement de l'équipe est unifié grâce à eslint --fix
• Il y a un débat sans fin entre les tabulations et les espaces : si vous ne poursuivez pas l’alignement des sauts de ligne attr du HTML et l’alignement des deux-points du CSS, il n’y a rien de mal avec les tabulations ; si vous souhaitez poursuivre l’alignement, il est préférable d’utiliser des espaces.

À propos des guillemets

• js unifie les guillemets doubles, les guillemets doubles dans la chaîne sont unifiés " , les guillemets simples x27 , les guillemets doubles x22 , de sorte que les guillemets doubles soient unifiés
• CSS unifie les guillemets doubles et le contenu du contenu doit être échappé pour éviter les caractères tronqués.
• css/less/scss, les guillemets doubles peuvent être utilisés à la place des guillemets simples dans de nombreux cas, et dans certains cas, les guillemets simples peuvent causer des problèmes lors de la compilation. De plus, les balises html utilisent également des guillemets doubles, qui se trouvent être unifiés.

S'il faut ajouter une virgule

• S'il n'y a pas d'erreurs de syntaxe, ajoutez-la, il y aura alors moins de changements de différence.

S'il faut ajouter un point-virgule

• S'il n'y a pas d'erreurs de syntaxe, ajoutez-la, il y aura alors moins de changements de différence.

À propos de la définition des variables

• Si elle est définie séparément, une variable par ligne, la priorité est donnée à const, et let est utilisé à la place de var.
• Si possible, utilisez la déstructuration d'objets ou de tableaux pour les affectations.

À propos de la commande d'importation

• La plus haute priorité est d'introduire polyfill, suivi de React/Vue
• Deuxièmement, dans le répertoire du module (node_modules), la profondeur du chemin du module est triée en premier, et l'ordre est classé et trié selon (composant>fonction>constante)
• Ensuite, il est chargé via le support de chargement, tel que : promise-loader
• Ensuite, il y a le répertoire de développement (dev_dir), qui est classé et trié selon (composant>fonction>constante)
• Introduire les fichiers de style, classer et trier selon (node_modules>dev_dir)
• Importez des fichiers image, classez-les et triez-les selon (node_modules>dev_dir)