webpack
Verwendung von Webpack
Suche…
Beispiel für CommonJS-Module
Ordner erstellen. Öffnen Sie es in der Befehlszeile. Führen Sie npm install webpack -g . Erstellen Sie 2 Dateien:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
Führen Sie die Befehlszeile aus: webpack ./app.js app.bundle.js
Jetzt im Ordner wird die Datei app.bundle.js . Sie können es in die index.html-Seite einschließen, es im Browser öffnen und das Ergebnis in der Konsole anzeigen.
Der schnellere Weg wird jedoch in der Befehlszeile ausgeführt: node app.bundle.js und das Ergebnis wird sofort in der Konsole node app.bundle.js :
['Dave', 'Henry', 'Martha']
Beispiel für AMD-Module
Ordner erstellen. Öffnen Sie es in der Befehlszeile. Führen Sie npm install webpack -g . Erstellen Sie 2 Dateien:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
In der Kommandozeile ausführen:
webpack ./app.js app.bundle.js
Jetzt im Ordner wird Datei: app.bundle.js .
Index.html Datei erstellen:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Öffnen Sie es im Browser und sehen Sie das Ergebnis in der Konsole:
['Dave', 'Henry', 'Martha']
Beispiel für ES6 (Babel) -Module
wie im MDN vom Juli 2016 geschrieben:
Diese Funktion ist derzeit in keinem Browser nativ implementiert. Es ist in vielen Transpilern wie Traceur Compiler, Babel oder Rollup implementiert.
Hier ist ein Beispiel mit Babel Loader für Webpack:
Ordner erstellen. Fügen Sie dort die package.json-Datei hinzu:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Ordner in der Befehlszeile öffnen. Lauf:
npm install.
Erstellen Sie 2 Dateien:
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
Für die korrekte Verwendung von babel-loader sollte die Datei webpack.config.js hinzugefügt werden:
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
In der Kommandozeile ausführen:
webpack ./app.js app.bundle.js
Jetzt im Ordner wird Datei: app.bundle.js .
Index.html Datei erstellen:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Öffnen Sie es im Browser und sehen Sie das Ergebnis in der Konsole:
['Dave', 'Henry', 'Martha']
Beispiel für ES6-Module (Typescript)
wie in [MDN] [1] vom Juli 2016 geschrieben:
Diese Funktion ist derzeit in keinem Browser nativ implementiert. Es ist in vielen Transpilern wie Traceur Compiler, Babel oder Rollup implementiert.
Hier ist ein Beispiel mit Typescript Loader für Webpack:
//MACHEN
Erstellen Sie eine vereinfachte Version dieses Artikels: http://www.jbrantly.com/typescript-and-webpack/ ohne tsd und jquery.