Using webpack 2 and NPM to bundle various resources of a web application part 5: adding babel.js for ES5 transformation

Introduction

In the previous post we first briefly discussed the output that webpack generates in the bundle.js file. Simply put, webpack extracts the dependency graph from the various JS input files and organises the elements into functions that in turn are placed into an array. The functions in the array are invoked in a sequence that reflects the dependency graph. Then we also built a minimal HTML page to execute the bundle in various browsers. Our ES6 code was successfully executed in all of them except for IE11 which is obviously too old to correctly interpret the new ES6 features. We would see the same in older versions of Chrome and FF as well.

In this post we’ll explore another great feature of webpack, namely the ease at which we can add plug-ins to the bundling process. We’ll specifically add babel.js to transform ES6 code to ES5. The point here is that JS developers want to be able to use the latest and greatest of ES6 and other future versions of JavaScript without having to worry about JS support across various browsers.

Read more of this post

Advertisements

Using webpack 2 and NPM to bundle various resources of a web application part 4: executing the bundle

Introduction

In the previous post we successfully configured webpack and executed it to create a bundled JS file in the build folder. We saw that the bundle.js file is larger than the two small input JS files together. That’s understandable as the generated bundle contains a lot of configuration code that webpack added on top of the file.

In this post we’ll briefly look at the generated bundle and also create a HTML page to execute bundle.js.

Read more of this post

Using webpack 2 and NPM to bundle various resources of a web application part 3: configuring and executing webpack

Introduction

In the previous post we started setting up a minimal project for our webpack demo. We installed Node.js so that we can create an NPM project where NPM stands for Node Package Manager. We also installed webpack as a development dependency and discussed the difference between development and production dependencies in an NPM project. We went through the role of the package.json file and saw where the dependencies are installed on disk. Finally we added two JS files to our src folder but left them empty.

In this post we’ll first briefly discuss dependencies between JS modules. Then we’ll go ahead and configure webpack, activate it for our demo project and run it using NPM.

Read more of this post

Using webpack 2 and NPM to bundle various resources of a web application part 2: code beginnings

Introduction

In the previous post we introduced the topic of this series which is the basics of webpack. Webpack is a bundling and packaging tool whose primary goal is to bundle the various JS and CSS scripts and images into minimised files that are faster to download in a web browser. Webpack is often associated with Single Page Applications that heavily rely on JavaScript to render and re-render the same page according to the actions of the website user. To be more exact, the various popular JS frameworks like React or Vue use webpack behind the scenes to build a deployable package out of a set of components of an SPA. Normally the command line tools associated with these frameworks, like the React command line interface (CLI), already have webpack configured that fits most needs but it’s still good to understand how webpack works and what it does in isolation. Otherwise newcomers to the technology don’t even dare to touch the webpack configuration file since it seems to perform a lot of woodoo magic.

In this post we’ll set up a minimal environment and start coding.

Read more of this post

ultimatemindsettoday

A great WordPress.com site

Elliot Balynn's Blog

A directory of wonderful thoughts

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

WEB APPLICATION DEVELOPMENT BEST PRACTICES WITH MICROSOFT STACK & ANGULAR

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: