Webpack for Beginners #4 - Babel Loaders

>> Tutorial Webpack for Beginners

1. What is Loaders

- Perform transfromations

- E.g Balel loader transform ES2015 or JSX in vanilla JS

- Many more loaders for other things too (such as SASS)

2. How to using Babel loader

- Install babel-core and babe-loader via npm

- Install any presets we will be using to perform transformations

- Configure webpack.config to tell webpack to use babel to transform our code

3. Step by step using

* Install babel

npm install babel-core babel-loader babel-preset-es2015 --save-dev

* Configure webpack.config.js

module.exports = {

//define entry point

entry: './src/script-1.js',

//define output point

output: {

path: 'dist',

filename: 'bundle.js'

},

module: {

loaders: [

{

test: /\.js$/,

exclude: /(node_modules)/,

loader: 'babel-loader',

query: {

presets: ['es2015']

}

}

] //loaders

} //module

};

- test: /\.js$/, //just wanted run on .js file

- exclude: /(node_modules)/,  // tell webpack exclude certain files

- loader: 'babel-loader', // which loader we use is babel-loader

- presets: ['es2015']  // which presets we use is es2015 to JavaScript

* Running webpack

webpack

>> Soure change on Github  

>> Tutorial Webpack for Beginners

Thank you