Tiny Bundler

A tiny javascript bundler, which implement the basic idea of tools like Webpack, and Parcel.

Introduction

The main purpose of this project is to explain how most bundlers work under the hood.

Installing

Start by cloning this repo in your local machine then change you working directory to be in tiny-bundler.

git clone [email protected]:meldisoukyy/tiny-bundler.git
cd tiny-bundler

Then, install dependencies.

npm install

Configurations

Firstly, create a file called bundle.config.json .

touch bundle.config.json

Your config file should have the following content.

{
	"entry": "./path-to-your-entry-file",
	"output": {
		"path": "./path-to-your-output-dir",
		"fileneame": "your-output-filename"
	}
}

Note: you have to explicity mention your entry file, but adding output property is optional.

if output is not exists, the defauld output file will be ./dist/bundle.js .

Try out the code

Override bundle.config.json file with the following data:

{
	"entry": "./examples/about_author/entry.js",
	"output": {
		"path": "./dist",
		"fileneame": "output.js"
	}
}

Secondly run the program with npm start. Then copy the content of ./dist/output.js and run it in your browser console.

Additional Resources

These are some awesome resources that can help you to get more information:

• minipack.
• [youtube video] Webpack founder Tobias Koppers demos bundling live by hand.