Heim >Web-Frontend >HTML-Tutorial >Erste Schritte mit Webpack: Teil 1
Erste Schritte mit Webpack: Teil 1
- PHPzOriginal
- 2023-08-27 08:49:07730Durchsuche
Beim Erstellen einer Website ist es heutzutage ziemlich üblich, eine Art Build-Prozess zu haben, der dabei hilft, Entwicklungsaufgaben auszuführen und Dateien für eine Live-Umgebung vorzubereiten.
Sie können dies mit Grunt oder Gulp tun und eine Reihe von Transformationen erstellen, die es Ihnen ermöglichen, an einem Ende Code einzufügen und am anderen Ende minimiertes CSS und JavaScript zu erhalten.
Diese Tools sind sehr beliebt und sehr nützlich. Es gibt jedoch noch einen anderen Weg, und zwar die Verwendung von Webpack.
Was ist Webpack?
Webpack ist ein sogenannter „Modul-Bundler“. Es nimmt JavaScript-Module, versteht ihre Abhängigkeiten, verbindet sie dann auf die effizienteste Weise miteinander und generiert schließlich eine JS-Datei. Nichts Besonderes, oder? Dinge wie RequireJS machen das schon seit Jahren.
Nun, hier ist die Sache. Mit Webpack sind Module nicht mehr auf JavaScript-Dateien beschränkt. Durch die Verwendung von Loadern weiß Webpack, dass JavaScript-Module möglicherweise CSS-Dateien und CSS-Dateien möglicherweise Bilder erfordern. Die Ausgaberessourcen enthalten nur das, was benötigt wird, und verursachen keine allzu großen Probleme. Beginnen wir mit der Einrichtung, damit wir es in Aktion sehen können.
Installation
Wie bei den meisten Entwicklungstools müssen Sie Node.js installieren, bevor Sie fortfahren können. Vorausgesetzt, Sie haben es richtig eingerichtet, müssen Sie zur Installation von Webpack lediglich Folgendes in die Befehlszeile eingeben.
npm install webpack -g
Dadurch wird Webpack installiert und Sie können es von überall auf Ihrem System ausführen. Als nächstes erstellen Sie ein neues Verzeichnis und erstellen darin eine einfache HTML-Datei wie folgt:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack fun</title>
</head>
<body>
<h2></h2>
<script src="bundle.js"></script>
</body>
</html>
Der wichtige Teil hier ist der Verweis auf bundle.js, das ist es, was Webpack für uns machen wird. Beachten Sie auch das H2-Element – wir werden es später verwenden.
Als nächstes erstellen Sie zwei Dateien im selben Verzeichnis wie die HTML-Datei. Nennen Sie den ersten main.js，您可以想象它是我们脚本的主要入口点。然后将第二个say-hello.js. Dies wäre ein einfaches Modul, das den Namen einer Person und ein DOM-Element übernimmt und eine Willkommensnachricht in dieses Element einfügt.
// say-hello.js
module.exports = function (name, element) {
element.textContent = 'Hello ' + name + '!';
};
Jetzt haben wir ein einfaches Modul, das wir importieren und aufrufen können main.js. Es ist so einfach wie folgt:
var sayHello = require('./say-hello');
sayHello('Guybrush', document.querySelector('h2'));
Wenn wir nun die HTML-Datei öffnen, wird diese Meldung offensichtlich nicht angezeigt, da wir die Abhängigkeit des Browsers weder eingebunden main.js 也没有编译浏览器的依赖项。我们需要做的是让 Webpack 查看 main.js noch kompiliert haben. Was wir tun müssen, ist, Webpack zu bitten, sich
Gehen Sie zurück zum Terminal und führen Sie Webpack aus. Geben Sie einfach ein:
webpack main.js bundle.js
bundle.jsDie erste angegebene Datei ist die Eintragsdatei, in der Webpack mit der Suche nach Abhängigkeiten beginnen soll. Es ermittelt, ob für die erforderlichen Dateien andere Dateien erforderlich sind, und setzt dies fort, bis alle erforderlichen Abhängigkeiten berechnet wurden. Sobald der Vorgang abgeschlossen ist, werden die Abhängigkeiten als einzelne verkettete Datei an ausgegeben. Wenn Sie die Eingabetaste drücken, sollten Sie etwa Folgendes sehen:
Hash: 3d7d7339a68244b03c68
Version: webpack 1.12.12
Time: 55ms
Asset Size Chunks Chunk Names
bundle.js 1.65 kB 0 [emitted] main
[0] ./main.js 90 bytes {0} [built]
[1] ./say-hello.js 94 bytes {0} [built]
index.htmlÖffnen Sie jetzt in Ihrem Browser, um zu sehen, wie Ihre Seite „Hallo“ sagt. Konfiguration
webpack.config.jsEs macht keinen großen Spaß, bei jeder Ausführung von Webpack Eingabe- und Ausgabedateien anzugeben. Zum Glück erspart uns Webpack die Mühe, indem es uns die Verwendung von Konfigurationsdateien ermöglicht. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
webpackJetzt können wir das gleiche Ergebnis erzielen, indem wir einfach eingeben. Entwicklungsserver
webpackWas ist das? Machen Sie sich überhaupt die Mühe, jedes Mal
npm install webpack-dev-server -g
webpack-dev-serverFühren Sie dann den Befehl aus . Dadurch wird ein einfacher Webserver gestartet, der das aktuelle Verzeichnis als Speicherort für die Bereitstellung von Dateien verwendet. Öffnen Sie ein neues Browserfenster und besuchen Sie http://localhost:8080/webpack-dev-server/. Wenn alles gut geht, sehen Sie etwa Folgendes: 
sayHelloProbieren Sie es aus, ändern Sie den an die
装载机
Webpack 最重要的功能之一是加载器。加载器类似于 Grunt 和 Gulp 中的“任务”。它们本质上是获取文件并以某种方式对其进行转换，然后再将其包含在我们的捆绑代码中。
假设我们想在代码中使用 ES2015 的一些优点。 ES2015 是 JavaScript 的新版本，并非所有浏览器都支持，因此我们需要使用加载器将 ES2015 代码转换为支持的普通旧 ES5 代码。为此，我们使用流行的 Babel Loader，根据说明，我们安装如下：
npm install babel-loader babel-core babel-preset-es2015 --save-dev
这不仅会安装加载器本身，还会安装其依赖项和 ES2015 预设，因为 Babel 需要知道它正在转换的 JavaScript 类型。
现在加载器已安装，我们只需要告诉 Babel 使用它即可。更新 webpack.config.js 使其看起来像这样：
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
],
}
};
这里有一些重要的事情需要注意。第一个是 test: /\.js$/ 行，它是一个正则表达式，告诉我们将此加载程序应用于所有具有 .js 扩展名的文件。同样，exclude: /node_modules/ 告诉 Webpack 忽略 node_modules 目录。 loader 和 query 是相当不言自明的——使用带有 ES2015 预设的 Babel 加载器。
按 ctrl+c 并再次运行 webpack-dev-server 重新启动您的 Web 服务器。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将 sayHello 变量更改为常量？
const sayHello = require('./say-hello')
保存后，Webpack 应该会自动重新编译您的代码并刷新您的浏览器。希望您不会看到任何变化。查看 bundle.js 并查看是否可以找到 const 关键字。如果 Webpack 和 Babel 已经完成了它们的工作，您将不会在任何地方看到它——只是普通的旧 JavaScript。
进入第 2 部分
在本教程的第 2 部分中，我们将介绍如何使用 Webpack 将 CSS 和图像添加到您的页面，以及让您的网站做好部署准备。
Das obige ist der detaillierte Inhalt vonErste Schritte mit Webpack: Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!