What is Webpack and How it works? I

No definitions! Yes, we will create a project and learn while using it.

Create a folder called 'webpacktut.'

Initialize git.

Create a remote repo and connect this local repo.

Initialize npm init --> "npm init -y"

You get this,

Since you npm initilaized,

Install web pack and its allies as Devdependecies,

npm i -D webpack webpack-cli webpack-dev-server

Now your package.json should look like this,

You should have node_modules associated with this webpack , so include it in gitignore.

Now that we have installed webpacks using npm --> package.json,we will quickly clean up and learn.Whenever we encounter a scenario that something is needed in package.json,we will include and learn why we need it by doing.

Just Dev dependencies in packege.json.

Include the scripts, follow me, and believe, and you will understand.

Now give "npm i" in the terminal --> we are saying devDepencies install it.Yes I know there is no new dependency added.But let's see what happens now,

With respect to webpacktut,we got no repository field and no license field.

We will get rid of it,

Include a key "private"and set to true in package.json.

Basically npm has many packages in public, like webpack,react,babel, etc.

These are all public registries in npm.

If you set private to true, it prevents publishing to the public registry.

This is only for public registries and not private.

We can't run npm publish, and we will get an error.

Now run run 'npm i',

Yes no warning now.Leave fsevents warning, which is more of OS related, and it is irrelevant.

Let us create index.js inside src folder and write some code.

Give a command 'npm run build' - this runs webpack as we have configured in package.json.

See your folder structure now,

You will have dist folder, and inside it there will be main.js.

Leave the warning now, and we will get to it later.

Notice 'dist' folder is created, and main.js is created.This is automatically created by webpack.

We didn't give any configuration to webpack, and hence it should be from default settings of webpack.

By default, webpack look for file in src directory and take that as input.

Outputs to dist directory.

We don't want the dist directory to be pushed to gihub/git.We mainly connect github to hosting platform, and everytime build happens,hosting platform should build or start fresh.

So include dist in .gitignore.

Let's add index.html in the src directory.

Connect it with main.js in script tag.

This is the index.html page, and this HTML renders different content based on script inside main.js.Thus the whole single page application evolves.

So whenever we change the code in src directory, and it should reflect in main.js and hence index.html.This is called 'hot reloading.'

So we need to configure webpack.How to add webpack configurations?

Create a file called 'webpack.config.js' --> Webpack recognise this file as configuration.

Notice mode warning is disappeared because we set mode to development.

devServer: { static:"./dist"} enables hot reloading.

Now you can change the files, and hot reload it.

No run npm run build,you get this in main.js --> so many comments because of default dev tools.

We will get rid of it.

In webpack config,give

devtool to false

Now build,

Note here the main.js has ES6 syntax like const and let --> some older browser may not be compatible with.

So we need to transpile them and make it compatible for older browsers.That's where babel comes in.

How to connect babel to webpack?

Install babel-loader,@babel/core and @babel/preset-env as dev dependancy.

Configure webpack like this,

module is the key we need to use here.

Note:module can be any self contained code(an JS file,CSS file,or any file.

Inside the module object, you can define an array of rules that specify how to process different types of modules.

Each rule contains a test property that specifies which files should be matched by the rule, and a use property that specifies which loader(s) to use to process those files.

So module{} --> rules [] --> {} --> test,exclude,use{} --> loader --> what loader you need to connect and options [] -->presets[] []

In Webpack, the use property is used to specify the loaders that should be applied to a particular module. Each loader can have its configuration options, which can be passed to the loader using the options property.

In our case,it is babel.

We are excluding node_modules because it takes time, and it is already converted when it is published to npm registry.

It is essential to understand use of babel core, and babel presets.

Bale is used for tranpilation of code --> parsing the code to one form to another.

That's the core functionality of babel.Therefore we install @babel/core.

What language features to transform, we need @babel/preset.

• @babel/preset-env for compiling ES2015+ syntax.

• @babel/preset-typescript for TypeScript.

• @babel/preset-react for React.

Babel-loader --> connects to webpack.So babel-loader takes in input file(index.js) and loads it to babel-loader, and babel takes care of conversion and gives it back to webpack.Then the output file(main.js) is generated.

So think of babel as middleware between input and output of webpack here.

So to get the real essence of this,we change the index.js and add some ES6+ features like spread operator,Object.entries etc.

Now give npm run build and see the main.js,

See how main.js converts to older version of ES syntax that is compatible for all browsers.

I hope you get some basic idea of webpack.

I agree its more of remembering and writing config files, but we need to understand how webpack , babel connects to the whole picture.

We will finish here and take off from here for the next part.