1.
Der Eintrag weist Webpack an, welche Datei als Ausgangspunkt für das Packen, Analysieren und Erstellen des internen Abhängigkeitsdiagramms zu verwenden.
2.
Die Ausgabe weist Webpack an, wo die gepackten Ressourcenpakete ausgegeben werden sollen und wie sie benannt werden sollen.
3. Loader
Webpack kann nur JavaScript- und JSON-Dateien verstehen. Dies ist die integrierte Funktion von Webpack, die sofort verfügbar ist. Loader ermöglichen es Webpack, andere Dateitypen zu verarbeiten und sie in gültige Module umzuwandeln, die von Anwendungen verwendet und dem Abhängigkeitsdiagramm hinzugefügt werden können.
4.
PluginsPlugins können verwendet werden, um ein breiteres Spektrum an Aufgaben auszuführen. Plug-ins reichen von der Verpackungsoptimierung und Komprimierung bis hin zur Neudefinition von Variablen in der Umgebung.
5. Modusmodus
(Modus) weist Webpack an, die Konfiguration des entsprechenden Modus zu verwenden.
Wir geben Ihnen eine detaillierte Einführung in die fünf Kernkonzepte von Webpack.
Das Eintragsobjekt wird von Webpack verwendet, um das Bundle zu finden, zu starten und zu erstellen. Der Eintrag ist der Ausgangspunkt der Anwendung. Von diesem Ausgangspunkt aus beginnt die Anwendung. Wenn Sie ein Array übergeben, wird jedes Element im Array ausgeführt. Der Einstiegspunkt gibt an, welches Modul Webpack verwenden soll, um mit der Erstellung seines internen Abhängigkeitsdiagramms zu beginnen. Nach Eingabe des Einstiegspunkts findet Webpack heraus, von welchen Modulen und Bibliotheken der Einstiegspunkt abhängt (direkt und indirekt).
Einfache Regel: Jede HTML-Seite hat einen Ausgangspunkt. Einseitige Anwendung (SPA): ein Einstiegspunkt, mehrseitige Anwendung (MPA): mehrere Einstiegspunkte.
Der Standardwert ist ./src/index.js , Sie können jedoch einen oder mehrere andere Einstiegspunkte angeben, indem Sie das entry in der Webpack-Konfiguration konfigurieren. Zum Beispiel:
//Einzelner Eintrag--string module.exports = {
Eintrag: './path/to/my/entry/file.js',
};
//Mehrere Einträge – Array module.exports = {
Eintrag: ['./src/index.js', './src/add.js']
};
//Mehrere Einträge – Objekt module.exports = {
Eintrag: {
home: './home.js',
about: './about.js',
Kontakt: './contact.js'
}
}; Werttyp des Eintrags:
Zeichenfolge: Einzeleintrag, gepackt, um einen Block zu bilden, und am Ende wird nur eine Bundle-Datei ausgegeben. Der Standardname des Blocks ist das Hauptarray
: Mehrfacheintrag, nur alle Eintragsdateien Bilden Sie am Ende einen Block. Geben Sie eine Bundle-Datei aus, und der Blockname lautet standardmäßig „main“. Wird im Allgemeinen nur in der HMR-Funktion verwendet, um HTML-Hot-Updates zu einem effektiven
Objekt zu machen: mehrere Einträge, so viele Chunks wie Schlüssel vorhanden sind, und so viele Bundle-Dateien werden ausgegeben, und jeder Schlüssel (Schlüssel) ist der Name des Chunks. Im Objekttyp kann der Wert jedes Schlüssels auch ein Array und nicht nur eine Zeichenfolge sein.
output weist Webpack an, wie und wo Ihr Bundle, Asset und andere von Ihnen gepackte Pakete oder alles, was mit Webpack geladen wird, ausgegeben werden soll . Der Standardwert des Ausgabepakets ist ./dist/main.js , und andere generierte Dateien werden standardmäßig im Ordner ./dist abgelegt.
Sie können diese Prozesse konfigurieren, indem Sie in der Konfiguration ein output angeben:
//webpack.config.js
const path = require('path');
module.exports = {
Eintrag: './path/to/my/entry/file.js',
Ausgabe: {
Pfad: path.resolve(__dirname, 'dist'),
Dateiname: „my-first-webpack.bundle.js“,
},
}; Wir können Webpack über die Eigenschaften output.filename und output.path mitteilen, wie das Bundle heißt und wo es generiert wird.
2.1.output.filename (Dateiname und Verzeichnis)
Diese Option bestimmt das Verzeichnis und den Namen jedes Ausgabepakets. Diese Bundles werden in das durch die Option output.path angegebene Verzeichnis geschrieben.
Bei einem einzelnen入口ist der Dateiname ein statischer Name. Wenn Sie jedoch mehrere Bundles über mehrere Einstiegspunkte, Codeaufteilung oder verschiedene Plug-Ins erstellen, sollten andere Methoden verwendet werden, um jedem Bundle einen eindeutigen Namen zu geben.
//Einzeleintrag:
module.exports = {
//......
Ausgabe: {
Dateiname: 'js/bundle.js'
}
};
//Mehrere Einträge – verwenden Sie den Eintragsnamen:
module.exports = {
//......
Ausgabe: {
Dateiname: '[Name].bundle.js'
}
};
//Mehrere Einträge – verwenden Sie einen eindeutigen Hash, um module.exports = { in jedem Build-Prozess zu generieren
//......
Ausgabe: {
Dateiname: '[Name].[Hash].bundle.js'
}
};
... 2.2. Output.path (Dateiverzeichnis)
Output.path gibt das Verzeichnis aller Ausgabedateien an, das das gemeinsame Verzeichnis für alle zukünftigen Ressourcenausgaben ist. path muss ein absoluter Pfad sein.
module.exports = {
//......
Ausgabe: {
Pfad: path.resolve(__dirname, 'dist/assets')
}
}; 2.3.output.publicPath (Pfadpräfix der referenzierten Ressourcen)
publicPath gibt das von allen Ressourcen in der HTML-Datei eingeführte öffentliche Pfadpräfix an. Es hat keinen Einfluss auf den Pfad der generierten Datei. Wenn die HTML-Datei stattdessen verschiedene Ressourcen einführt, wird publicPath als Präfix zum Pfad der importierten Ressourcen hinzugefügt.
Beispiel:
In der von vue-cli generierten Webpack-Konfiguration ist der Wert von publicPath in der Produktionsumgebung standardmäßig „/“, was das Stammverzeichnis des aktuellen Verzeichnisses ist.
Nach dem Packen öffnen wir die HTML-Datei und sehen, dass der in der HTML-Datei eingeführte Ressourcenpfad wie folgt lautet:
Wie Sie sehen können, wird das /-Symbol vor dem Pfad hinzugefügt. Wenn wir den Browser öffnen, um auf die generierte HTML-Datei zuzugreifen, wird ein Fehler angezeigt. Auf die Ressource kann nicht zugegriffen werden. Zu diesem Zeitpunkt sieht der Ressourcenzugriff ähnlich aus:
Auf dem Server kann es wie folgt aussehen, es kann jedoch zu Problemen beim Zugriff kommen.
Wir können publicPath in einen relativen Pfad ändern oder ihn direkt auskommentieren.
2.3.1. Der Unterschied zwischen Pfad und öffentlichem
打包后文件在硬盘中的存储位置，是webpack所有文件的输出的路径，必须是绝对路径。比如：输出的js、图片，HtmlWebpackPlugin生成的html文件等，都会存放在以path为基础的目录下。2.4. Output.chunkFilename (Name des Nicht-Eintrags-Chunks)
Output.chunkFilename bestimmt den Namen der Nicht-Eintrags-Chunk-Datei. Das heißt, zusätzlich zu den von der Eintragsdatei generierten Chunks werden auch die von anderen Dateien generierten Chunk-Dateien benannt.
module.exports = {
//......
Ausgabe: {
chunkFilename: 'js/[name]_chunk.js' //Der Name des Nicht-Eintrags-Chunks}
}; Webpack selbst kann nur JavaScript- und JSON-Dateien packen ( webpack3+和webpack2+ verfügen über eine integrierte Verarbeitung von JSON-Dateien, aber webpack1+并不支持， muss json-loader einführen). Webpack sofort verfügbar. Webpack selbst unterstützt das Packen anderer Dateitypen wie CSS, Vue usw. nicht, aber wir können verschiedene Loader verwenden, damit Webpack diese Dateitypen verarbeiten kann. Der Loader kann Dateien aus verschiedenen Sprachen (z. B. TypeScript) in JavaScript konvertieren oder Inline-Bilder in Daten-URLs umwandeln. Der Loader ermöglicht sogar import von CSS-Dateien in JavaScript-Module!
Durch die Verwendung verschiedener loader hat webpack die Möglichkeit, externe Skripte oder Tools aufzurufen, um Dateien in verschiedenen Formaten zu verarbeiten, z. B. die Analyse und Konvertierung von SCSS in CSS oder die Konvertierung von JS-Dateien der nächsten Generation (ES6, ES7) in mit modernen Browsern kompatible JS-Dateien. Für die React-Entwicklung können entsprechende Loader in React verwendete JSX-Dateien in JS-Dateien konvertieren.
In der Webpack-Konfiguration verfügt der Loader über zwei Attribute:
test , das angibt, welche Dateien konvertiert werden.
Das use -Attribut definiert, welcher Loader bei der Konvertierung verwendet werden soll.
include/exclude（可选）： Dateien (Ordner) manuell hinzufügen, die verarbeitet werden müssen, oder Dateien (Ordner) blockieren, die nicht verarbeitet werden müssen.
query（可选） : Zusätzliche Einstellungsoptionen für Loader bereitstellen.
// Beispiel: webpack.config
const path = require('path');
module.exports = {
Ausgabe: {
Dateiname: „my-first-webpack.bundle.js“,
},
Modul: {
Regeln: [
{ test: /.txt$/, Loader: 'raw-loader' },
{ test: /.css$/, use: ['style-loader', 'css-loader'] } //Wenn Sie mehrere Loader verwenden, sollten Sie use verwenden
],
},
}; In der obigen Konfiguration ist das rules -Attribut für ein separates Modulobjekt definiert, das zwei erforderliche Attribute enthält: test und use . Dies ist gleichbedeutend damit, dem Webpack-Compiler mitzuteilen, dass er, wenn er auf einen Pfad stößt, der in der require() / import Anweisung als „.txt“ geparst wird, ihn vor dem Packen mit raw-loader konvertieren soll.
Wenn Sie mehrere Loader verwenden, sollten Sie use verwenden. Die Loader im use-Array werden der Reihe nach ausgeführt: von rechts nach links. In der obigen CSS-Datei kompiliert beispielsweise der erste CSS-Loader die CSS-Datei in JS und lädt sie in die JS-Datei. Anschließend erstellt der Style-Loader ein Style-Tag und fügt die Style-Ressourcen in JS in das Head-Tag ein.
3.1. CSS-Loader
Webpack bietet zwei Tools zur Verarbeitung von Stylesheets, css-loader und style-loader . Sie erledigen unterschiedliche Aufgaben. css-loader können Sie CSS-Dateien mit einer Methode einführen, die import style-loader ähnelt. Durch die Kombination der beiden können Sie Stylesheets in JS-Dateien einbetten, die von Webpack gepackt werden Datei kann in die JS-Datei eingefügt werden.
//Installiere npm install --save-dev style-loader css-loader //Wenn die CSS-Loader-Version zu hoch ist, kann die Kompilierung fehlschlagen. Es wird empfohlen, die verfügbare Version zu senken
//Module verwenden.exports = {
...
Modul: {
Regeln: [
{
test: /(.jsx|.js)$/,
verwenden: {
Lader: „babel-loader“
},
ausschließen: /node_modules/
},
{
test: /.css$/, //So führen Sie mehrere Loader in dieselbe Datei ein. Die Aktionsreihenfolge der Lader ist, dass die späteren Lader mit der ersten Verwendung beginnen: [
{
Lader: „style-loader“
}, {
Lader: „css-loader“
}
]
}
]
}
}; Angenommen, es gibt eine main.css-Datei:
body {
Hintergrund: grün;
} Damit Webpack die Datei „main.css“ finden kann, importieren wir sie wie folgt in „main.js“:
//main.js
import React aus 'react';
{render} aus 'react-dom' importieren;
Greeter aus './Greeter' importieren;
import './main.css';//Verwenden Sie require, um die CSS-Datei zu importieren render(<Greeter />, document.getElementById('root')); Normalerweise wird CSS in dieselbe Datei wie js gepackt, nicht Will als separate CSS-Datei gepackt werden. Bei entsprechender Konfiguration kann das Webpack CSS jedoch auch in separate Dateien packen.
-Loader werden zum Konvertieren bestimmter Modultypen verwendet, während Plug-ins für eine breitere Palette von Aufgaben verwendet werden können, darunter: Verpackungsoptimierung, Komprimierung, Ressourcenverwaltung, Einfügen von Umgebungsvariablen usw. Der Zweck des Plug-Ins besteht darin, andere Dinge zu lösen, die der Loader nicht erreichen kann.
Um ein Plugin zu verwenden, müssen wir es über npm installieren und dann eine Instanz des Plugins unter der Plugins-Eigenschaft hinzufügen. Da Plugins Parameter/Optionen tragen können, müssen Sie die new Instanz an plugins Eigenschaft in der Webpack-Konfiguration übergeben. Die meisten Plug-Ins können über Optionen angepasst werden, und Sie können dasselbe Plug-In in einer Konfigurationsdatei mehrmals für verschiedene Zwecke verwenden.
//webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // Installation über npm const webpack = require('webpack'); // Wird verwendet, um auf integrierte Plug-ins zuzugreifen module.exports = {
Modul: {
Regeln: [{ test: /.txt$/, use: 'raw-loader' }],
},
Plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
}; Im obigen Beispiel generiert html-webpack-plugin eine HTML-Datei für die Anwendung und fügt automatisch alle generierten Bundles ein.
4.1. BannerPlugin-Plugin (Hinzufügen einer Copyright-Erklärung)
Nachfolgend haben wir ein Plug-in hinzugefügt, das dem gepackten Code eine Copyright-Erklärung hinzufügt. Dieses Plug-in ist ein integriertes Plug-in im Webpack und muss nicht installiert werden.
const webpack = require('webpack');
module.exports = {
...
Modul: {
Regeln: [
{
test: /(.jsx|.js)$/,
verwenden: {
Lader: „babel-loader“
},
ausschließen: /node_modules/
},
{
test: /.css$/,
verwenden: [
{
Lader: „style-loader“
}, {
Lader: „css-loader“,
Optionen: {
Module: wahr
}
}, {
Lader: „postcss-loader“
}
]
}
]
},
Plugins: [
neues webpack.BannerPlugin('Wenxuehai Alle Rechte vorbehalten, jede Vervielfältigung wird untersucht')
],
}; 4.2. Hot Module Replacement-Plugin (Hot Loading)
Hot Module Replacement (HMR) ist ein sehr nützliches Plug-in im Webpack. Es ermöglicht Ihnen, den geänderten Effekt automatisch in Echtzeit zu aktualisieren und anzuzeigen. Das Hot-Loading unterscheidet sich vom Webpack-Dev-Server. Wenn die Anwendung ausgeführt wird, kann das Hot-Replacement die Auswirkungen von Codeaktualisierungen anzeigen, ohne die Seite zu aktualisieren, genau wie das Ändern des Dom-Stils direkt im Browser, während der Webpack-Dev-Server eine Aktualisierung erfordert die Seite.
(1) Fügen Sie das HMR-Plugin zur Webpack-Konfigurationsdatei hinzu.
(2) Fügen Sie den „Hot“-Parameter zum Webpack Dev Server
4.2.1
hinzu, um das Hot-Loading von Funktionen zu implementieren .
Babel verfügt über ein Plug-in namens „reactreact-transform-hmr
,
react-transform-hrm dem HMR ohne zusätzliche Konfiguration des React-Moduls ordnungsgemäß funktioniert
-hmr
const webpack = require('webpack');
module.exports = {
Eintrag: __dirname + "/app/main.js",//Die einzige Eintragsdatei, die schon oft erwähnt wurde Ausgabe: {
Pfad: __dirname + „/public“,
Dateiname: „bundle.js“
},
devtool: 'eval-source-map',
devServer: {
contentBase: „./public“, // Das Verzeichnis, in dem sich die vom lokalen Server geladene Seite befindet. HistoryApiFallback: true, // Nicht inline springen: true,
heiß: stimmt
},
Modul: {
Regeln: [
{
test: /(.jsx|.js)$/,
verwenden: {
Lader: „babel-loader“
},
ausschließen: /node_modules/
},
{
test: /.css$/,
verwenden: [
{
Lader: „style-loader“
}, {
Lader: „css-loader“,
Optionen: {
Module: wahr
}
}, {
Lader: „postcss-loader“
}
]
}
]
},
Plugins: [
new webpack.BannerPlugin('Copyright, jede Reproduktion wird untersucht'),
neues webpack.HotModuleReplacementPlugin() //Hot-Reload-Plugin],
}; Babel konfigurieren
// .babelrc
{
„presets“: [„reagieren“, „env“],
„env“: {
"Entwicklung": {
"plugins": [["react-transform", {
„transformiert“: [{
„transform“: „react-transform-hmr“,
„imports“: [„reagieren“],
„locals“: [„Modul“]
}]
}]]
}
}
} //Greeter,js
import React, {
Komponente
} von 'reagieren'
Stile aus „./main.css“ importieren
Klasse Greeter erweitert Component {
render() {
zurückkehren (
<div>
<h1>
aaaf
</h1>
</div>
);
}
}
Standard-Greeter //main.js
exportieren
import React aus 'react';
importieren {
machen
} von 'react-dom';
Greeter aus './greeter.js' importieren;
render( < Greeter / > , document.getElementById('root')); Wenn wir nun das Hot-Loading-Modul implementieren können, können wir den aktualisierten Inhalt bei jedem Speichern direkt im Browser sehen und der Browser muss nicht aktualisiert werden. Automatisch aktualisieren.
(Manchmal gibt es keine Auswirkung, es kann ein Versionsproblem sein)
4.3. ExtractTextWebpackPlugin-Plugin (CSS extrahieren)
Standardmäßig behandelt Webpack den CSS-Stil nicht als unabhängige Datei, sondern packt das CSS auch in eine JS-Datei und verpacken Sie die generierte JS-Datei. Wenn die JS-Datei gerendert wird, wird der Stil in Form eines Style-Tags über die JS-Syntax in die Seite eingefügt. In diesem Fall ist die gepackte Bundle-Datei jedoch möglicherweise zu groß. Zu diesem Zeitpunkt können wir das ExtractTextWebpackPlugin-Plugin verwenden, um den CSS-Stil in eine CSS-Datei zu trennen.
Das ExtractTextWebpackPlugin-Plugin verschiebt die *.css-Datei, auf die im Eintragsblock verwiesen wird (einschließlich der importierten CSS-Datei und des in die Vue-Datei geschriebenen Stils), in eine unabhängige und separate CSS-Datei. ExtractTextPlugin generiert für jeden Eintragsblock eine entsprechende CSS-Datei, was bedeutet, dass ein Eintrag einer CSS-Datei entspricht. Wenn mehrere Einträge vorhanden sind, werden jeweils mehrere entsprechende CSS-Dateien generiert.
Mit dem ExtractTextWebpackPlugin-Plugin werden Ihre Stile nicht mehr in das JS-Bundle eingebettet, sondern in einer separaten CSS-Datei (z. B. styles.css ) abgelegt. Wenn Ihre Stildateien größer sind, beschleunigt dies das frühe Laden, da das CSS-Bundle parallel zum JS-Bundle geladen wird.
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
Modul: {
Regeln: [
{
test: /.css$/,
verwenden: ExtractTextPlugin.extract({
Fallback: „style-loader“,
Verwendung: „css-loader“
})
}
]
},
Plugins: [
neues ExtractTextPlugin({
Dateiname: utils.assetsPath('css/[name].[contenthash].css'), //ExtractTextPlugin generiert eine entsprechende Datei für jeden Eintragsblock. Wenn Sie also mehrere Eintragsblöcke konfigurieren, müssen Sie [Name], [ID] verwenden ] oder [contenthash]
// allChunks: true, // Wenn „CommonsChunkPlugin“ verwendet wird und im gemeinsamen Chunk extrahierte Chunks (aus „ExtractTextPlugin.extract“) vorhanden sind, muss „allChunks“ ** auf „true“ gesetzt werden.
}),
]
} 4.3.1. allChunks-Option (ob auch asynchron geladene Stile zusammen extrahiert werden sollen)
Der Standardwert der allChunks-Option des ExtractTextWebpackPlugin-Plug-Ins ist false.
Die Option allChunks gibt an, ob asynchron geladene Stile zusammen extrahiert werden müssen. Denn selbst wenn das ExtractTextWebpackPlugin-Plugin verwendet wird und der Stil oder die Stildatei asynchron geladen wird, werden diese Stile standardmäßig nicht in unabhängige CSS-Dateien extrahiert, sondern dennoch in JS-Dateien gepackt.
Daher ist allChunks:false der Standardwert, um den Code aus dem Eintrag zu extrahieren, aber der asynchron geladene Code wird nicht extrahiert. allChunks:true dient dazu, den Code aller Module (einschließlich asynchron geladener Module) zu extrahieren eine Datei. Wenn das asynchrone Laden von Stilen verwendet wird, aber allChunks auf false gesetzt ist, müssen wir den Fallback von ExtractTextPlugin.extract festlegen. fallback besteht darin, style-loader zum asynchronen Laden zu verwenden, wenn der vom asynchronen Code geladene CSS-Code nicht vorhanden ist extrahiert. Der Stil der Komponente.
Bitte beachten Sie:
https://github.com/sevenCon/blog-github/blob/master/articles/webpack Studiennotizen (2) – Verwendung von ExtractTextWebpackPlugin.md
https://blog.csdn.net/weixin_41134409/article/ Details /88416356
Durch Auswahl von „ development “, production oder none zum Festlegen mode Modusparameters können Sie die integrierte Optimierung des Webpacks in der entsprechenden Umgebung aktivieren. Der Standardwert ist production .
module.exports = {
Modus: 'Produktion',
}; Wenn Sie die Modusoption direkt in der Konfigurationsdatei konfigurieren, wird Webpack angewiesen, die integrierte Optimierung des entsprechenden Modus zu verwenden. Zu den Modusoptionen gehören „Entwicklung“, „Produktion“ und „Keine“.
Entwicklung: Entwicklungsmodus, der gepackte Code wird nicht komprimiert und das Code-Debugging ist aktiviert.
Produktion: Produktionsmodus, genau das Gegenteil.
Stellen Sie den Modus auf „Entwicklung“ oder „Produktion“ ein, und Webpack legt automatisch den Wert von „process.env.NODE_ENV“ fest. Wir können diesen Wert direkt in jedem Ordner abrufen. Wenn Sie jedoch nur NODE_ENV festlegen, wird mode nicht automatisch festgelegt. (Im Knoten stellt die globale Variable „Prozess“ den aktuellen Knotenprozess dar. Das Attribut „process.env“ enthält Informationen zur Benutzerumgebung. Das Attribut „NODE_ENV“ ist in „process.env“ selbst nicht vorhanden. Wir definieren das Attribut „NODE_ENV“ im Allgemeinen selbst und verwenden es, um zu bestimmen, ob dies der Fall ist ist eine Produktionsumgebung oder eine Entwicklungsumgebung)
(Bitte beachten Sie: Die Modusoption ist neu in Webpack4. Vor 4 wurde sie mit dem DefinePlugin-Plugin festgelegt. Webpack4 hat das DefinePlugin gelöscht.)
5.1 Die Moduskonfiguration des vue-cli-Projekts wird im Webpack ausführlich erläutert
. Im Allgemeinen wird der Wert von NODE_ENV in der Konfigurationsdatei konfiguriert. In dem standardmäßig mit vue-cli generierten Vue-Projekt lautet die NODE_ENV-Konfiguration wie folgt:
// Unter der Datei webpack.dev.conf.js wird die Datei dev.env.js eingeführt neues webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}), //module.exports = merge(prodEnv, { in der Datei dev.env.js
NODE_ENV: „Entwicklung“
}) // Unter der Datei webpack.prod.conf.js wird die Datei prod.env.js eingeführt const env = require('../config/prod.env')
neues webpack.DefinePlugin({
'process.env': env
}), //module.exports = { in der Datei prod.env.js
NODE_ENV: „Produktion“
} Wie Sie oben sehen können, konfiguriert die Konfigurationsdatei NODE_ENV auf „Entwicklung“, in der Produktionsumgebung konfiguriert die Konfigurationsdatei NODE_ENV auf „Produktion“.
Wenn wir das Projekt ausführen, führen wir npm run dev oder npm run build aus. Diese beiden Befehle verwenden die Konfigurationsdatei der Entwicklungsumgebung oder Produktionsumgebung, um das laufende Projekt zu generieren, und konfigurieren entsprechend den entsprechenden NODE_ENV-Wert. Der entsprechende NODE_ENV-Wert kann in jeder Datei des Projekts abgerufen werden (nicht unbedingt in der Konfigurationsdatei, da dies davon abhängt, ob die mit dem NODE_ENV-Wert konfigurierte Konfigurationsdatei wirksam geworden ist).
5.2. Der Konfigurationsprozess Process.env.NODE_ENV
ist eine globale Variable des Knotens und der Prozess verfügt über das Attribut env, jedoch nicht über das Attribut NODE_ENV. Die Variable NODE_ENV ist nicht direkt in Process.env verfügbar, sondern wird durch Setzen erhalten. NODE_ENV wird jedoch normalerweise zum Definieren des Umgebungstyps verwendet. Die Funktion dieser Variablen ist: Wir können die Entwicklungsumgebung von der Produktionsumgebung unterscheiden, indem wir diese Variable beurteilen.
(1) Globale Variablenwerte können über das integrierte Plugin DefinePlugin von Webpack festgelegt werden:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('produktion')
}), nach dem Festlegen können Sie diesen Wert im Ausführungsskript abrufen, zum Beispiel:
// main.js console.log(process.env.NODE_ENV); //Produktion
, aber dieser Wert kann nicht in der Webpack-Konfigurationsdatei webpack.config.js abgerufen werden.
(2) Laden Sie zunächst das Cross-Env-Paket über die
Cross-Env-Paketeinstellung herunter:
cnpm i cross-env -D
Legen Sie die package.json-Datei fest:
„build“: „cross-env NODE_ENV=test webpack --config webpack.config .js"
Zu diesem Zeitpunkt kann der Wert (process.env.NODE_ENV) in der Konfigurationsdatei abgerufen werden, jedoch nicht im ausführbaren Skript. Er muss mit dem DefinePlugin-Plug-In verwendet werden.