Tutorial zur Verwendung von webpack.config.js-Parametern

Dieses Mal bringe ich Ihnen ein Tutorial zur Verwendung von webpack.config.js-Parametern. Was sind die Vorsichtsmaßnahmen für die Verwendung von webpack.config.js-Parametern? Das Folgende ist ein praktischer Fall.

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 , können wir angeben. Es gibt den Pfad an, wie in cake-webpack-config (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);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用Linux重复加载 .vimrc文件

vue-cli+webpack无法新建项目

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von webpack.config.js-Parametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!