Anwendungsfall für den Parameter webpack.config.js

Dieses Mal werde ich Ihnen einen Anwendungsfall von webpack.config.js-Parametern vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von webpack.config.js-Parametern?

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 oder ein Array oder ein Objekt sein.

Wenn Eintrag eine Zeichenfolge ist, wird er zum Definieren der Eintragsdatei verwendet:

entry: './js/main.js'

Wenn Eintrag ein Array ist, enthält es auch die Eintrags-JS-Datei und einen weiteren Parameter Es kann verwendet werden, um einen statischen Ressourcenserver zu konfigurieren, der von Webpack, Webpack-Dev-Server, bereitgestellt wird. 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 wird regulärer Ausdruck verwendet, um Dateinamen mit unterschiedlichen Suffixen abzugleichen und dann unterschiedliche Loader für sie zu definieren. 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 Loadern, die im obigen Beispielcode konfiguriert wurden, können wir einen Loader namens „react-hot“ sehen. Mein Projekt wird zum Erlernen von React und zum Schreiben verwandter Codes verwendet. Daher habe ich einen React-Hot-Loader konfiguriert, mit dem ich den Hot-Austausch von React-Komponenten implementieren 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. Regulären Ausdruck extrahieren: '/^.*.js$/';

于是这个时候为了更好地配合wenpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：

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

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

推荐阅读：

构建项目时本地ip无法访问处理方法

vue-cli+webpack创建项目报错

Das obige ist der detaillierte Inhalt vonAnwendungsfall für den Parameter webpack.config.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!