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
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
In a nutshell, ** Node.js is a module bundler tool that runs on the server side **.
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! !! !! !!
** 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.
** Files such as JavaScript files ** are called modules.
By the way, webpack also collects CSS and images, so they are also called modules! !!
Resolve dependencies and combine multiple modules into one.
In the first place, a bundle means a ** grouped file **.
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 **
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.
In front-end development, jQuery and Vue.js are often used, and webpack can easily use such external modules.
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.
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.
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! !! !!