webpack Usage of Webpack Usage ES6 (Babel) modules example
Example
as written in MDN at July 2016:
This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler, Babel or Rollup.
So here is example with Babel loader for Webpack:
Create folder. Add package.json file there:
{
"devDependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
}
}
Open folder in command line. Run:
npm install.
Create 2 files:
cats.js:
export var cats = ['dave', 'henry', 'martha'];
app.js:
import {cats} from "./cats.js";
console.log(cats);
For proper using of babel-loader should be added webpack.config.js file:
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel?presets[]=es2015'
}
]
}
Run in command line:
webpack ./app.js app.bundle.js
Now in folder will be file: app.bundle.js.
Create index.html file:
<html>
<body>
<script src='app.bundle.js' type="text/javascript"></script>
</body>
</html>
Open it in browser and see result in console:
[ 'dave', 'henry', 'martha' ]
