webpack frames herunterladen - webpack frames Quellcode herunterladen

webpack frames

Andere Kategorien

1.0.0

Herunterladen

Abzeichen

Überprüfen Sie das &&-Format
webpack1-ie8
webpack3-react
webpack3-vue
webpack4-react
webpack4-vue

Anweisungen zum Aktualisieren

Die in webpack4-vue und webpack3-vue enthaltenen Ordner sind genau gleich. Bitte kopieren Sie sie bei Bedarf selbst.
Die in webpack4-react und webpack3-react enthaltenen Ordner sind genau die gleichen. Bitte kopieren Sie sie bei Bedarf selbst.
Der Unterschied zwischen Webpack 2 und 3 ist grundsätzlich sehr gering, es ist kein Problem, 2 direkt durch 3 zu ersetzen. Es werden hier nur die Versionen 1/3/4 besprochen, das offizielle Migrationsdokument
Die Entwicklungsumgebung wurde im laufenden Betrieb neu geladen. Wenn Sie möchten, dass die Entwicklungsumgebung mit ie11 oder niedriger kompatibel ist, deaktivieren Sie bitte das Hot-Neuladen.
- Entfernen Sie react-hot-loader/babel aus der plugins Datei .babelrc
- Entfernen Sie react-hot-loader aus devDependencies in package.json
- devServer.inline in config/opt.dev.js muss falsch sein (vue muss nur diesen Punkt ändern)
- react-hot-loader aus dem Code entfernen
Die Entwicklungsumgebung unterstützt bereits die Front-End mock api , die die Dateien unter src/mock automatisch liest und Hot-Updates durchführt. Die Codelogik befindet sich in config/mock.js , das example enthält.
Die Versionen von vue und vue-template-compiler müssen vollständig konsistent sein, sonst kommt es zu unvorhergesehenen Fehlern.
Die Konfigurationen von webapck134,react,vue im config wurden vereinheitlicht. Verschiedene Projekte müssen lediglich opt.self.js ändern.
Es gibt Auslassungen in der readme Beschreibung. Bitte wechseln Sie zu der Datei, um die Codekommentare zu lesen. Der entscheidende Punkt ist, dass die Dateien im config Kommentare und offizielle Referenzdokumentadressen enthalten.
devDependencies werden verwendet, um die dependencies der gesperrten Version zu platzieren. Da sie nicht in npm veröffentlicht werden müssen, ist diese Klassifizierung eher willkürlich und sogar falsch Baidu für spezifische Details
Da DllPlugin und CommonsChunkPlugin或splitChunks über doppelte Funktionen verfügen und erstere zuvor einen Webpack-Befehl ausführen müssen, können sie einfach durch externals ersetzt werden. Letzteres verfügt über einen großen betriebsfähigen Speicherplatz und kann daher frei entpackt werden, um die Dateigröße zu vereinheitlichen , wird das folgende DllPlugin nicht mehr verwendet

Umweltvorbereitung

Legen Sie die Taobao-Spiegel npm config set registry https://registry.npm.taobao.org
Führen Sie npm i -g npminstall als Administrator aus
Geben Sie über die Befehlszeile das aktuelle Verzeichnis ein und führen Sie npminstall -c aus
Wenn ein Fehler auftritt, sind gängige Lösungen wie folgt:
- Führen Sie npm cache clean -f und npm cache verify -f als Administrator aus
- Löschen Sie das Verzeichnis node_modules
- Führen Sie npminstall -c erneut aus
- Wechseln Sie abschließend zu einem besseren Netzwerk und aktualisieren Sie node und npm
Hinweise zur Verwendung:
- npminstall -c und npm install sind nicht kompatibel. Ersteres ist viel schneller als letzteres, sie können jedoch nicht zusammen verwendet werden.
- Für den Wechsel zur Verwendung muss der Ordner node_modules gelöscht werden
- Wenn es ein Problem mit node-v12.0.0 gibt, aktualisieren Sie es bitte noch nicht. Die neueste Version von node-v12 hat kein Problem.
- Gelegentlich treten unerklärliche Verpackungsfehler oder Codierungsfehler auf. Löschen Sie node_modules und versuchen Sie es erneut.

Start der Entwicklungsumgebung

npm start
- Bitte verwenden Sie es, wenn Sie Unterstützung benötigen, z
- npm run env -- FOR_IE=1 npm start
Öffnen Sie http://localhost:8888 im Browser

Bereitstellung der Produktionsumgebung

npm run app
- Bitte verwenden Sie es, wenn Sie Unterstützung benötigen, z
- npm run env -- FOR_IE=1 npm run app
Kopieren Sie einfach den Inhalt des dist-Ordners auf den Server

Fügen Sie weitere Funktionen hinzu

npm run report um die Zusammensetzung des Produktionspaketpakets anzuzeigen
- Bitte verwenden Sie es, wenn Sie Unterstützung benötigen, z
- npm run env -- FOR_IE=1 npm run report
npm run debug fügt den Breakpoint-Debugging-Start hinzu, Port 7777
- Bitte verwenden Sie es, wenn Sie Unterstützung benötigen, z
- npm run env -- FOR_IE=1 npm run debug

Aktualisieren Sie package.json

Installieren Sie npm i -g npm-check-updates
Führen Sie ncu (view) ncu -u (update) im Verzeichnis package.json aus

Verwenden Sie das Hot-Reloading von React-Hot-Loader

Offizielle Dokumentation

Fügen Sie react-hot-loader zu devDependencies in package.json hinzu
devServer.inline von webpack.cfg.dev.js muss true sein
Fügen Sie react-hot-loader/babel zu plugins von .babelrc hinzu
Fügen Sie --hot zum Startbefehl hinzu, verwenden Sie nicht gleichzeitig HotModuleReplacementPlugin
Die export Root-Komponente wird geändert und react-hot-loader wird vor react

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

Hinweis: Nur 4.3.12 unterstützt ie8+react@0 und erfordert eine kleine Änderung, die im Skript abgeschlossen wurde

Bildbearbeitung

Gewöhnliches Bild => https://tinypng.com图片压缩=> url-loader (unter 4 KB)
SVG-Bild => https://github.com/svg/svgo svg压缩=> svg-url-loader

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

Webpack 3 4 unterstützt IE8-Forschung

Der von DllPlugin gepackte Code wurde nicht konvertiert und weist höchstwahrscheinlich Inkompatibilitätsprobleme auf, sodass die Paketierungsgeschwindigkeit nicht wesentlich verbessert werden kann.
Das Prinzip des Hot-Reloads ist Object.defineProperty, das von ie8 nicht unterstützt wird
Das neueste React/Antd kann nicht verwendet werden, [email protected]/[email protected] unterstützt nur ie8; vue unterstützt ie8 nicht direkt
Derzeit werden fast alle Vorteile von Webpack 3 4 nicht unterstützt, und die Kompatibilität der Online-Version ist nicht sehr gut.
Wenn Sie Webpack 3 4 wirklich verwenden möchten, um mit IE8 kompatibel zu sein, werden die folgenden als Referenz bereitgestellt, wurden jedoch nicht getestet (sie sollten alle Probleme haben).
- https://github.com/ediblecode/webpack4-ie8
- https://github.com/natural-fe/natural-cli/blob/master/ie8-mvvm.md

Referenz zur Codespezifikation

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规范中文版
Häufig verwendete esling -Konfigurationen eslint-config-egg eslint-config-react-app eslint-config-ali

Persönliche Codierungsgewohnheiten (von Person zu Person unterschiedlich, wählen Sie aus, was Sie für richtig halten, nur als Referenz)

Über das Belassen einer Leerzeile am Ende der Datei

Einzelpersonen folgen ihren Gewohnheiten und die Teamentwicklung wird durch automatisches eslint --fix

Über Code-Einrückung

Einzelpersonen folgen ihren Gewohnheiten und die Teamentwicklung wird durch automatisches eslint --fix
Es gibt eine endlose Debatte zwischen Tabulatoren und Leerzeichen: Wenn Sie die attr-Zeilenumbruchausrichtung von HTML und die Doppelpunktausrichtung von CSS nicht verfolgen, ist es nichts Falsches an Tabulatoren, wenn Sie die Ausrichtung verfolgen möchten, ist es besser, Leerzeichen zu verwenden.

Über Anführungszeichen

js vereinheitlicht doppelte Anführungszeichen, die doppelten Anführungszeichen innerhalb der Zeichenfolge sind vereinheitlicht " , einfache Anführungszeichen x27 , doppelte Anführungszeichen x22 , sodass die doppelten Anführungszeichen vereinheitlicht sind
CSS vereinheitlicht doppelte Anführungszeichen und der Inhalt muss mit Escapezeichen versehen werden, um verstümmelte Zeichen zu vermeiden.
In CSS/less/scss können in vielen Fällen doppelte Anführungszeichen anstelle von einfachen Anführungszeichen verwendet werden, und in einigen Fällen können einfache Anführungszeichen beim Kompilieren zu Problemen führen. Darüber hinaus verwenden HTML-Tags auch doppelte Anführungszeichen, die zufällig vereinheitlicht sind.

Ob ein Komma hinzugefügt werden soll

Wenn keine Syntaxfehler vorliegen, fügen Sie sie hinzu, dann werden weniger Diff-Änderungen vorgenommen.

Ob ein Semikolon hinzugefügt werden soll

Wenn keine Syntaxfehler vorliegen, fügen Sie sie hinzu, dann werden weniger Diff-Änderungen vorgenommen.

Informationen zum Definieren von Variablen

Wenn es separat definiert ist, eine Variable pro Zeile, wird const Priorität eingeräumt und let anstelle von var verwendet.
Verwenden Sie für Zuweisungen nach Möglichkeit die Destrukturierung von Objekten oder Arrays.

Über den Importauftrag

Die höchste Priorität hat die Einführung von Polyfill, gefolgt von React/Vue
Zweitens wird im Modulverzeichnis (node_modules) zuerst die Modulpfadtiefe sortiert und die Reihenfolge wird nach (Komponente> Funktion> Konstante) klassifiziert und sortiert.
Dann wird es über das Lademedium geladen, z. B.: Promise-Loader
Dann gibt es noch das Entwicklungsverzeichnis (dev_dir), das nach (Komponente>Funktion>Konstante) klassifiziert und sortiert ist.
Stildateien einführen, klassifizieren und sortieren nach (node_modules>dev_dir)
Bilddateien importieren, klassifizieren und sortieren nach (node_modules>dev_dir)

Expandieren

Zusätzliche Informationen