Beginners examined webpack and summarized it

About this article

I was creating a portfolio with Rails 6, but I was developing it because I could not understand webpack, so I posted it as a summary of my study

Reference URL

https://qiita.com/kamykn/items/45fb4690ace32216ca25 https://eng-entrance.com/what-is-nodejs https://note.com/billion_dollars/n/n596fecfdeb2e https://qiita.com/ashketcham/items/48d64e960d436f8b6f78

What is webpack

In a nutshell, ** Node.js is a module bundler tool that runs on the server side **.

By the way, suddenly all the unknown words are lined up and my thoughts are about to stop.

If you express the inside of your head when you read the explanation of this webpack,

"Is Node.js delicious ???" "What is a module ..."

Just calm down and look up unknown words here! !! !! !!

What is Node.js?

** JavaScript that runs on the server side. ** Works like Ruby or PHP.

JavaScript that runs on the server side in this way is called ** server-side JavaScript **, but Node.js is a typical example. (It seems that there are many other things, but it seems to be a minor.) ** Node.js = Server-side JavaScript ** Please be aware.

What is a module?

** Files such as JavaScript files ** are called modules.

By the way, webpack also collects CSS and images, so they are also called modules! !!

What is Bundler

Resolve dependencies and combine multiple modules into one.

In the first place, a bundle means a ** grouped file **.

In other words, if you break down the terms so far and explain webpack ...

It's a JavaScript that runs on the server side, and it's a convenient way to combine CSS, JavaScript, images, etc. into one file! !! !! !! (Forcible)

** You're wondering here **

Why do you need to put it together? ?? ?? ??

It is in the mechanism of HTTP / 1.1, which is a communication protocol between browsers / servers. HTTP / 1.1 has a limited number of requests that can be processed at one time. In such a limited situation, if you request CSS, images, and JS files one by one, the processing speed will slow down. Therefore, it is possible to increase the display speed (performance) by collecting JS requests as much as possible and reducing the number of requests.

Now that I've somehow figured out what webpack is, I'll summarize the benefits of webpack.

The good thing about webpack

Part 1: External modules can be easily used.

In front-end development, jQuery and Vue.js are often used, and webpack can easily use such external modules.

Part 2: You can output a file with resolved dependencies.

If there is a file that loads multiple libraries etc. and loads it in application.js that depends on it, it will be as follows

qiita.rb


<!DOCTYPEhtml>
<html>
	<head>
		<metacharset="utf8"/>
		<title>dependency</title>
	</head>
	<body>
		<scriptsrc="js/extra.js"></script>
		<scriptsrc="js/jquery.js"></script>
        <scriptsrc="js/mymodule.js"></script>
        <scriptsrc="js/main.js"></script>
		<scriptsrc="js/application.js"></script>
	</body>
</html>

If you do the above, there is a concern that the more reads you have, the more difficult it will be to manage, and if you change the read order, it may not work properly.

Webpack solves that concern! !! !!

If you didn't use webpack, you would have written files such as js and below one by one, but if you put them together ** tightly ** with webpack, you can write with considerably less description.

qiita.rb


<!DOCTYPEhtml>
<html>
	<head>
		<metacharset="utf8"/>
		<title>dependencyresolved</title>
	</head>
	<body>
		<scriptsrc="js/bundle.js"></script>
	</body>
</html>

You don't need to write any other CSS or JS loading, it's all in bundle.js.

Summary

webpack is a module bundler for front-end development. A module bundler is a tool that bundles multiple modules, and a module is a JavaScript file or the like. In other words, webpack is a tool that puts together multiple JavaScript files! !! !!

Recommended Posts

Beginners examined webpack and summarized it
Java beginners briefly summarized the behavior of Array and ArrayList