webpack
Utilisation de Webpack
Recherche…
Exemple d'utilisation des modules CommonJS
Créer le dossier. Ouvrez-le en ligne de commande. Exécutez npm install webpack -g . Créez 2 fichiers:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
Exécuter en ligne de commande: webpack ./app.js app.bundle.js
Maintenant, dans le dossier sera le fichier app.bundle.js . Vous pouvez l'inclure dans la page index.html, l'ouvrir dans le navigateur et voir le résultat dans la console.
Mais plus rapide est exécuté en ligne de commande: node app.bundle.js et voir le résultat immédiatement dans la console:
['dave', 'henry', 'martha']
Exemple d'utilisation des modules AMD
Créer le dossier. Ouvrez-le en ligne de commande. Exécutez npm install webpack -g . Créez 2 fichiers:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
Exécuter en ligne de commande:
webpack ./app.js app.bundle.js
Maintenant, dans le dossier sera le fichier: app.bundle.js .
Créez le fichier index.html:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Ouvrez-le dans le navigateur et voyez le résultat dans la console:
['dave', 'henry', 'martha']
Exemple d'utilisation des modules ES6 (Babel)
comme écrit en MDN en juillet 2016:
Cette fonctionnalité n'est implémentée dans aucun navigateur de manière native pour le moment. Il est implémenté dans de nombreux transpileurs, tels que le compilateur Traceur, Babel ou Rollup.
Voici donc un exemple avec le chargeur Babel pour Webpack:
Créer le dossier. Ajoutez le fichier package.json ici:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Ouvrez le dossier en ligne de commande. Courir:
npm install.
Créez 2 fichiers:
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
Pour utiliser correctement babel-loader, il faut ajouter le fichier webpack.config.js :
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
Exécuter en ligne de commande:
webpack ./app.js app.bundle.js
Maintenant, dans le dossier sera le fichier: app.bundle.js .
Créez le fichier index.html :
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Ouvrez-le dans le navigateur et voyez le résultat dans la console:
['dave', 'henry', 'martha']
Exemple d'utilisation des modules ES6 (Typescript)
comme écrit en [MDN] [1] en juillet 2016:
Cette fonctionnalité n'est implémentée dans aucun navigateur de manière native pour le moment. Il est implémenté dans de nombreux transpileurs, tels que le compilateur Traceur, Babel ou Rollup.
Voici donc un exemple avec le chargeur Typescript pour Webpack:
//FAIRE
Créer une version simplifiée de cet article: http://www.jbrantly.com/typescript-and-webpack/ sans tsd et jquery.