We have summarized the mechanism until multiple static files are applied to the browser. Roughly speaking The browser has a fixed language that it can recognize, and any language needs to be translated into a language that it can recognize. This translation work is called compilation, and if it cannot be compiled, it must be processed in advance. This pre-processing is called pre-compilation, and each small function is made into a set of processing called modules, compiled, and returned to the browser.
Premise
Programming beginner(Two months)This is a summary of what I learned.
It may not be valid in the actual field or there may be incorrect information.
If you have noticed it, I would appreciate it if you could point it out in the comments.
The browser can only recognize the languages HTML, CSS, JavaScript and WebAssembly. No matter what you write on the server side, these four are finally returned to the browser. Browsers cannot render pages in other languages.
The browser recognizes only the above four, but there are programming languages designed to be easier to write and read in development. This programming language is called a ** high-level language **.
A programming language designed to be easier for humans to understand than machines Languages that are easy for machines to recognize are called ** low-level languages **. High-level language example CSS:SCSS、SASS JavaScript:TypeScript、CoffeeScript
The process of translating a language that is convenient for development so that the browser can recognize it is called compilation.
compile The task of translating a programming language so that it can be understood by the machines that operate it. Compiling is done by a program called a compiler. If there is a language that the compiler cannot recognize, you need to precompile it in advance.
** Precompiled ** Ahead-of-time that allows the compiler to translate languages that it cannot translate. Pre-processing performed for the main processing As a method for performing this precompilation, there is a mechanism called an asset pipeline.
** Asset Pipeline ** A function that organizes static files called assets such as JavaScript and CSS into small pieces The processing of the asset pipeline is performed in the flow of precompilation → concatenation → compression → placement. After precompiling and concatenating multiple static files, compress and reduce the weight and place it in the public directory so that it can be passed to the browser. Precompilation is done using the module bundler.
** Module bundler ** Module bundler is a tool to manage JavaScript modules while considering their dependencies. A module is a set of processes that divides functions one by one so that they can be read from other files. Modules manage a group of functions, and when each function has a dependency, the module bundler manages them while considering them. Module Pandora is used because if the functions are divided into files without being managed by modules, problems will occur when finally combining them into one file.
webpack Mainstream tool in module bundler There are four main things webpack does ・ Entry Decide which file to use as the reference (entry point) to resolve the dependency. ・ Output Specify where and what name to output the file that is used as an entry point and collected by webpack. ・ Loaders Read (load) the method of converting files such as CSS and HTML other than JavaScript into modules, and perform the specified processing. ・ Plugins Introduce and extend (plug-in) tasks that the loader cannot execute other than collecting files such as compression.
Recommended Posts