How to configure Webpack and module bundling from scratch

What is Webpack?

Webpack has become one of the most important tools for modern web development. It is a tool that lets you compile JavaScript modules, also known as module bundler. Given a large number of files (front-end assets) like HTML, CSS, even images, it generates a single file (or a few files) that run your app. It can give you more control over the number of HTTP requests your app is making and allows you to use other flavors of those assets such as Pug, Sass, and ES8. Webpack is not limited to be used on the frontend, it’s also useful in backend Node.js development as well.

Get started

Create a new folder “webpack-example”.

Set up a new npm package.

Install webpack and webpack-cli using npm.

Create the following directory structure and contents:

Edit the dist/index.html file.

Edit the src/index.js file.

Edit the webpack.config.js file.

Edit the package.json file.

Run to build webpack production.

Take another look at dist/bundle.js and you’ll see an ugly mess of code. Our bundle has been minified with UglifyJS.

The codes will run exactly the same, but it’s done with the smallest file size possible.

  • –mode development optimizes for build speed and debugging.
  • –mode production optimizes for execution speed at runtime and output file size.

Run your project

Open index.html file in your browser.

Webpack and module bundling

Source Code

(Visited 367 times, 1 visits today)

Yong Loon Ng

Ng Yong Loon, better known as Kristofer is a software engineer and computer scientist who doubles up as an entrepreneur.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *