eInterviewQuestions

Webpack Interviews Questions

All our users, you can also add/post your question and answer which is mostly asked by an Interviewer in Interviews, you all can suggest for any changes to make our website best & user friendly. please feel free to Post Question.

Q1. What is Webpack?

Webpack is an open source module bundler for modern JavaScript applications. It takes modules with dependencies and generates static assets representing those modules.

Webpack is used to compile JavaScript modules.

Pre requisites

Good understanding of HTML , any scripting language like JavaScript/ES6/React/Angular and Style sheets.


Q2. When do you need Webpack and what are the goals of WebPack?

Webpack is good fit for a complex front-end application with non-code static assets like style sheets, images etc.

Webpack is not recommended for small web applications.

Based on the dependency, Webpack creates a dependency graph so as to give a modular approach to the web applications.

Code Splitting (detailed later in the course) is an exciting feature that keeps Webpack distinct from all other module bundlers.

Webpack goals are not limited to

1. Spliting the dependency tree into chunks loaded on demand

2. Reducing initial load time

3. Every static asset should be able to be a module

4. Integrating Third party libraries as modules

5. Ensuring each part of the module is customizable

6. Webpack is very much suitable for large projects


Q3. What are the core concept of Webpack?

Webpack includes four core concepts

            1. Entry

            2. Output

            3. Module loaders

            4. Plugins.

Entry: The starting point of a dependency graph is called an Entry point, it tells webpack where to start bundling.

Output : It tells the Webpack where to bundle the modules of the application and how to treat a bundled code.

Loaders: Loaders are like tasks in other build tools, and provide a powerful way to handle frontend build steps.

Loaders can: Transform files from a different language like, CoffeeScript to JavaScript or inline images as data URLs

Plugins : Plugins are the backbone of Webpack as it fully exposes the potential of webpack. Plugins are additional node modules that usually work on the resulting bundle.


Q4. Why do we need Loaders?

Webpack can handle JavaScript natively. Loaders are like tasks in other build tools, and provide a powerful way to handle frontend build steps

Loaders can: Transform files from a different language like, CoffeeScript to JavaScript or inline images as data URLs

Loaders also allow you to include css files( require() ) right in JavaScript!

There is wide variety of loaders available which includes: - conversion on ES6 code to ES5 code using babel. - scss loader which converts SASS code to css.


Q5. What is Plugins?

In Webpack, the developers are not confined to the predefined build callbacks. They can use customized build callbacks using plugins.

Plugins are the backbone of Webpack as it fully exposes the potential of webpack.

Plugins are additional node modules that usually work on the resulting bundle.

For Example:

HtmlWebpackPlugin simplifies the creation of HTML files to serve Webpack bundles.

ExtractTextWebpackPlugin moves all CSS modules in entry chunks into a separate CSS file. So that the styles are no longer inlined into the JS bundle, but are saved in a separate CSS file (styles.css).