Detaillierte Erläuterung der Parameter basierend auf webpack.config.js

Im Folgenden werde ich Ihnen eine detaillierte Erläuterung der Parameter basierend auf webpack.config.js mitteilen, die einen guten Referenzwert haben und ich hoffe, dass sie für alle hilfreich sein werden.

Die Datei webpack.config.js wird normalerweise im Stammverzeichnis des Projekts abgelegt und ist selbst auch ein Standard-Commonjs-Spezifikationsmodul.

var webpack = require('webpack');
module.exports = {
 entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'
 ],
 output: {
  path: './build',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude:  /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
  ]
 },
 resolve:{
  extensions:['','.js','.json']
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

1.Eintrag

Eintrag kann ein String, ein Array oder ein Objekt sein.

Wenn der Eintrag ein String ist, wird er zum Definieren der Eintragsdatei verwendet:

entry: './js/main.js'

Wenn der Eintrag ein Array ist, enthält er auch die Eintrags-JS-Datei. Ein weiterer Parameter kann zum Konfigurieren des Webpacks verwendet werden Stellt einen statischen Ressourcenserver bereit, den Webpack-Dev-Server. Der Webpack-Dev-Server überwacht die Änderungen in jeder Datei im Projekt, erstellt sie in Echtzeit und aktualisiert die Seite automatisch:

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

Wenn der Eintrag ein Objekt ist, können wir verschiedene Dateien in verschiedene Dateien erstellen und verwenden Fügen Sie bei Bedarf einfach hello.js in meine Hallo-Seite ein:

 entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

2.output

Ausgabeparameter Ist ein verwendetes Objekt um die Ausgabe der erstellten Datei zu definieren. Es enthält Pfad und Dateinamen:

 output: {
  path: './build',
  filename: 'bundle.js'
 }

Wenn wir im Eintrag mehrere Dateien definieren und erstellen, kann der Dateiname entsprechend in [Name] geändert werden.js wird verwendet, um die Namen verschiedener Dateien nach deren Erstellung zu definieren.

3.module

Was das Laden von Modulen betrifft, definieren wir es in module.loaders. Hier werden reguläre Ausdrücke verwendet, um Dateinamen mit unterschiedlichen Suffixen abzugleichen, und dann werden unterschiedliche Lader für sie definiert. Definieren Sie beispielsweise drei Loader in Reihe für weniger Dateien (! Wird zum Definieren von Kaskadenbeziehungen verwendet):

module: {
 loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
 ]
}

Darüber hinaus können Sie auch Bildressourcen wie PNG und JPG hinzufügen, die automatisch verarbeitet werden, wenn sie kleiner sind als 10k-Loader für Base64-Bilder:

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

Nachdem wir Loader zu CSS, Less und Bildern hinzugefügt haben, können wir nicht nur JS-Dateien wie in Node benötigen, sondern auch CSS-, Less- und sogar Bilddateien:

 require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');

Was Sie jedoch wissen müssen, ist, dass die auf diese Weise erforderlichen Dateien in das js-Bundle integriert werden. Wenn wir die erforderliche Schreibmethode beibehalten müssen und die CSS-Datei separat herausnehmen möchten, können wir das unten erwähnte Plug-in [extract-text-webpack-plugin] verwenden.

In den ersten im obigen Beispielcode konfigurierten Loadern können wir einen Loader namens „react-hot“ sehen. Mein Projekt wird zum Erlernen der Reaktion und zum Schreiben verwandten Codes verwendet. Daher habe ich einen React-Hot-Loader konfiguriert, mit dem der Hot-Austausch von React-Komponenten erreicht werden kann. Wir haben webpack/hot/only-dev-server im Eingabeparameter konfiguriert, sodass wir beim Starten des Webpack-Entwicklungsservers nur den Parameter --hot aktivieren müssen, um React-Hot-Loader zu verwenden. Definieren Sie es wie folgt in der package.json-Datei:

"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }

4.resolve

Webpack sortiert die Dateien beim Erstellen des Pakets nach Verzeichnis .Find, das Erweiterungsarray im Auflösungsattribut wird verwendet, um zu konfigurieren, welche Dateisuffixe das Programm selbst vervollständigen kann:

 resolve:{
  extensions:['','.js','.json']
 }

Wenn wir dann eine js-Datei laden möchten, müssen Sie zum Laden nur require('common') verwenden common.js-Datei.

6.externals

Wenn wir einige andere Klassenbibliotheken oder APIs im Projekt benötigen möchten, diese Klassenbibliotheken aber nicht möchten Der Quellcode ist in Laufzeitdateien integriert, was für die tatsächliche Entwicklung erforderlich ist. An dieser Stelle können wir dieses Problem lösen, indem wir den externals-Parameter konfigurieren:

 externals: {
  "jquery": "jQuery"
 }

Damit wir diese APIs im Projekt sicher verwenden können: var jQuery = require("jquery");

7.context

Wenn wir ein Modul benötigen und Variablen in require einschließen, so:

require("./mods/" + name + ".js");

Dann können wir das nicht wissen spezifisches Modul beim Kompilieren. Aber zu diesem Zeitpunkt wird Webpack auch einige Analysearbeiten für uns erledigen:

1. Analyseverzeichnis:

2. Extrahieren Sie den regulären Ausdruck: '/^.*.js$/';

Um bei der Kompilierung besser mit wenpack zusammenzuarbeiten , wir können angeben. Es gibt den Pfad an, genau wie das, was in cake-webpack-config gemacht wird (wir ignorieren hier die Rolle von abcoption):

 var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

Das Obige habe ich für alle kompiliert, ich hoffe, dass es so ist in Zukunft für alle hilfreich sein.

Verwandte Artikel:

ajax+springmvc implementiert die Datenaustauschmethode zwischen C und View

Spring MVC Front-End und Back-End 5 Ajax-Interaktionsmethode

Ajax-Verifizierungscode für doppelte Implementierung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Parameter basierend auf webpack.config.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!