Step 1: Use New ECMAScript 6 Features. Open js/app. … Step 2: Set Up Babel and Webpack. Now that the application uses ECMAScript 6 features, you need to compile it using Babel. … Step 3: Build and Run.

What is the difference between Babel and Webpack?

Babel will turn your ES6+ code into ES5 friendly code, so you can start using it right now without waiting for browser support; Webpack: A bundler for javascript and friends. … Babel can be classified as a tool in the “JavaScript Compilers” category, while Webpack is grouped under “JS Build Tools / JS Task Runners”.

What is Webpack and how do you use it?

Webpack is a static module bundler for JavaScript applications — it takes all the code from your application and makes it usable in a web browser. Modules are reusable chunks of code built from your app’s JavaScript, node_modules, images, and the CSS styles which are packaged to be easily used in your website.