Why Use Webpack

The Webpack is a module bundler. Webpack can take care of bundling adjacent a separate task branch, however, the line between bundler and task branch. Seldom these plugins are used to complete tasks that are normally done outside of webpack, such as deploying the build or cleaning the build directory.

Webpack is a build tool that use puts all of your assets, images, fonts, and CSS, including Javascript in a dependence graph. The Webpack lets you use require() your source code to tend to local files, like images, and decide how they're prepared in your final Javascript bundle, like rearranging the path with a URL pointing to a CDN.

Use Of Webpack

If you're making an intricate frontend application with any non-code motionless assets so as  CSS, fonts, images,etc, then yes, Webpack will give you big improvements. If your application is logically small, and you don't have many motionless assets and you only need to build one Javascript file on serve to the client, then Webpack force be more above than you want.

What Actually Webpack Do?

Webpack allows using on local "static assets," suggesting non-Javascript files.

<img src={ require('../../assets/logo.png') } />

Wait, we can't require() images in Javascript! What's performing on?

When we run Webpack, it searches by all of our code for require() calls. It matches the path string ../../assets/logo.png to the "loader" arrangement you specify.

 
loaders: [ 
            { test: /.png$/, loader: "file" }
         ]

The file loader two things. In the bundled Javascript code, it substitutes the require() call with a URL string, creating it correct Javascript. The string depends on how we configure Webpack. Mayhap it fits a CDN URL, like cdn.mysite.com/logo.png.

The file loader also drivels out logo.png within some local folder we define, like dist/. Now we totally upload the contents of dist/ to your CDN, use our new code, and the image is confirmed to load on your site.

Key thought: The require('logo.png') source code nevermore really gets performed in the browser (nor in Node.js). Webpack builds a new Javascript file, substituting require() calls with pure Javascript code, so as URLs. The bundled file is what's performed by Node or the browser.