Role of Webpack in our appliction
Posted By : Pankaj Kumar Thakur | 31-Jan-2018
Introduction
Webpack is a popular module bundler. A bundle is a javascript file that incorporates assets that belongtogether and should be served to the client in a response to a single file request . Abundle can include javascript, css styles, HTMl, and almost any other kind of file.
Webpack roams over our application source code, looking for import statements, building a dependency graph, and emitting one or more bundles.with plugins and rules, webpack can preprocess and minify different non-javascript files such as TypeScript, SASS, and LESS files.
It creates a javascript file called webpack.config.js .
It is a build tools that puts all of our assets, css, images and javascript file in a dependancy graph.
webpack lets you use require() in your source code to point to local files, like images and decided how they are processed in our final javascript bundle.
Before webpack we manage javascript dependancy by including files in specific orders. like
<html>
</html>
What does webpack do
Webpack gives you a chance to utilize require() on nearby "static resources," which means non-Javascript documents.
<html>
</html>
Pause, you can't require() pictures in Javascript! What's happening?
When you run Webpack, it seeks through the greater part of your code for require() calls. It thinks about the way string ../resources/logo.png to the "loader" setup you determine.
loaders: [
{ test:/.png$/, loader: "document" }
]
In this case, when you require() record ways finishing off with .png (coordinating the above consistent articulation), Webpack sends that document to the document loader.
The document loader completes two things. In the packaged Javascript code, it replaces the require() call with a URL string, making it legitimate Javascript. The string relies upon how you design Webpack. Possibly it turns into a CDN URL, as cdn.mysite.com/logo.png.
The document loader likewise releases logo.png into some neighborhood envelope you indicate, similar to dist/. Presently you basically transfer the substance of dist/to your CDN, convey your new code, and the picture is ensured to stack on your site.
Key idea: The require('logo.png') source code never really gets executed in the program (nor in Node.js). Webpack assembles another Javascript document, supplanting require() calls with legitimate Javascript code, for example, URLs. The packaged record is what's executed by Node or the program.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Pankaj Kumar Thakur
Pankaj is a MEAN stack developer and expertise in Front-End for web application using Angulajs,Angularjs2/4 with Framework Ionic,Bootstarp,Javascript and Html5 css3, Singing and Reading are includes in his Hobbies.