webpack
Användning av Webpack
Sök…
Exempel på användning av CommonJS-moduler
Skapa mapp. Öppna den i kommandoraden. Kör npm install webpack -g . Skapa 2 filer:
cats.js:
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js
cats = require('./cats.js');
console.log(cats);
Kör i kommandoraden: webpack ./app.js app.bundle.js
Nu i mappen kommer filen app.bundle.js . Du kan inkludera den i index.html-sidan, öppna den i webbläsaren och se resultatet i konsolen.
Men snabbare sätt körs i kommandoraden: node app.bundle.js och se resultatet omedelbart i konsolen:
['dave', 'henry', 'martha']
Exempel på användning av AMD-moduler
Skapa mapp. Öppna den i kommandoraden. Kör npm install webpack -g . Skapa 2 filer:
cats.js:
define(function(){
return ['dave', 'henry', 'martha'];
});
app.js
require(['./cats'],function(cats){
console.log(cats);
})
Kör i kommandoraden:
webpack ./app.js app.bundle.js
Nu i mappen kommer filen: app.bundle.js .
Skapa index.html-fil:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Öppna den i webbläsaren och se resultatet i konsolen:
['dave', 'henry', 'martha']
Exempel på användningsmoduler ES6 (Babel)
som skrivet i MDN i juli 2016:
Den här funktionen implementeras inte i några webbläsare för närvarande. Det implementeras i många transpilerare, till exempel Traceur Compiler, Babel eller Rollup.
Så här är exempel med Babel loader för Webpack:
Skapa mapp. Lägg till paket.json-fil där:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Öppna mappen i kommandoraden. Springa:
npm install.
Skapa 2 filer:
cats.js :
export var cats = ['dave', 'henry', 'martha'];
app.js :
import {cats} from "./cats.js";
console.log(cats);
För korrekt användning av babel-loader bör läggas webpack.config.js- fil:
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
Kör i kommandoraden:
webpack ./app.js app.bundle.js
Nu i mappen kommer filen: app.bundle.js .
Skapa index.html- fil:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Öppna den i webbläsaren och se resultatet i konsolen:
['dave', 'henry', 'martha']
Exempel på användning av ES6-moduler (Typescript)
som skrivet i [MDN] [1] i juli 2016:
Den här funktionen implementeras inte i några webbläsare för närvarande. Det implementeras i många transpilerare, till exempel Traceur Compiler, Babel eller Rollup.
Så här är exempel med Typescript loader för Webpack:
//ATT GÖRA
Skapa en förenklad version av denna artikel: http://www.jbrantly.com/typescript-and-webpack/ utan tsd och jquery.