9 Basic webpack Interview Questions And Answers
Tags: webpack, fullstack, interview, career
Published: 2018-08-20 22:59:12

---
title: 9 Basic webpack Interview Questions And Answers
published: true
description: 9 Basic webpack Interview Questions And Answers in 2018
tags: webpack, fullstack, interview, career
canonical_url: https://www.fullstack.cafe/blog/basic-webpack-interview-questions-and-answers-2019
---
![9 Basic webpack Interview Questions And Answers in 2019](https://images.pexels.com/photos/190407/pexels-photo-190407.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350)
Webpack is an open-source JavaScript module bundler. It takes the dependencies and generates a dependency graph allowing web developers to use a modular approach for their web application development purposes. It also takes in various assets, such as JavaScript, CSS, Fonts, Images, and HTML, and then transforms these assets into a format that’s convenient to consume through a browser. The true power of Webpack is the sum of its parts.

> Originally published on [FullStack.Cafe - Never Fail Your Tech Interview Again](https://www.fullstack.cafe)

### Q1: What is webpack?
> Topic: **Webpack**<br/>Difficulty: ⭐

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



🔗 **Source:** [blog.andrewray.me](https://blog.andrewray.me/webpack-when-to-use-and-why/)
### Q2: Name some benefits of using webpack
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐

Webpack and static assets in a dependency graph offers many benefits. Here's a few:

*   **Dead asset elimination.** This is killer, especially for CSS rules. You only build the images and CSS into your `dist/` folder that your application actually needs.
*   **Easier code splitting.** For example, because you know that your file `Homepage.js` only requires specific CSS files, Webpack could easily build a `homepage.css` file to greatly reduce initial file size.
*   **You control how assets are processed.** If an image is below a certain size, you could [base64 encode it](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) directly into your Javascript for fewer HTTP requests. If a JSON file is too big, you can load it from a URL. You can `require('./style.less')` and it's automaticaly parsed by Less into vanilla CSS.
*   **Stable production deploys.** You can't accidentally deploy code with images missing, or outdated styles.
*   Webpack will slow you down at the start, but give you **great speed benefits** when used correctly. You get hot page reloading. True CSS management. CDN cache busting because Webpack automatically changes file names to hashes of the file contents, etc.

Webpack is the main build tool adopted by the React community.

🔗 **Source:** [blog.andrewray.me](https://blog.andrewray.me/webpack-when-to-use-and-why/)
### Q3: Name some plugins you think are very important and helpful
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐

* **CommonsChunkPlugin** - creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points.
* **DefinePlugin** -  allows you to create global constants which can be configured at compile time. 
* **HtmlWebpackPlugin** - simplifies creation of HTML files to serve your webpack bundles. 
* **ExtractTextWebpackPlugin** - Extract text from a bundle, or bundles, into a separate file.
* **CompressionWebpackPlugin** - Prepare compressed versions of assets to serve them with Content-Encoding.

🔗 **Source:** [webpack.js.org](https://webpack.js.org/concepts/loaders/)
### Q4: Webpack gives us a dependency graph. What does that mean?
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐

Any time one file depends on another, webpack treats this as a *dependency*. This allows webpack to take non-code assets, such as images or web fonts, and also provide them as dependencies for your application.

Webpack lets you use require() on local "static assets":
```js
<img src={ require('../../assets/logo.png') } />  
```

When webpack processes your application, it starts from a list of modules defined on the command line or in its config file. Starting from these entry points, webpack recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often, just one - to be loaded by the browser.

The `require('logo.png')` source code never actually gets executed in the browser (nor in Node.js). Webpack builds a new Javascript file, replacing `require()` calls with valid Javascript code, such as URLs. The bundled file is what's executed by Node or the browser.

🔗 **Source:** [blog.andrewray.me](https://blog.andrewray.me/webpack-when-to-use-and-why/)
### Q5: List some pitfalls of Webpack
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐⭐

Webpack isn't perfect and has some pitfalls.
*   **The documentation is awful.** The language is often confusing, [such as](http://webpack.github.io/docs/what-is-webpack.html) "webpack takes modules with dependencies and generates static assets representing those modules." What? Even the page layout is problematic, with random sidebar entries you can't click on, and animated logos while you're trying to read.
*   The **source code** is [similarly painful](https://github.com/webpack/webpack/issues/824).
*   **Configuring Webpack** is a minefield for newcomers. The configuration file syntax is confusing. It helps to look at [established examples](https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js) from [boilerplate projects](https://github.com/gaearon/react-hot-boilerplate).
*   Webpack is **maintained mostly by [one person](https://github.com/sokra).** The rapid community adoption and the [thrust into the spotlight](https://www.youtube.com/watch?v=VkTCL6Nqm6Y) means the ecosystem lags far behind the maturity of React. This has side effects, such as the poor quality of the documentation.
*   Webpack introduces a nasty **mini language in a string:** `require("!style!css!less!bootstrap/less/bootstrap.less");` This syntax is almost never used, and [barely explained](http://webpack.github.io/docs/using-loaders.html#loaders-in-require), but it's all over the documentation. This string language is one of of Webpack's biggest design flaws in my opinion.

🔗 **Source:** [blog.andrewray.me](https://blog.andrewray.me/webpack-when-to-use-and-why/)
### Q6: Explain me the difference between NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack?
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐⭐

* `npm` & `bower` are package managers. They just download the dependencies and
don't know how to build projects on their own. What they know is to call
`webpack`/`gulp`/`grunt` after fetching all the dependencies.
* `bower` is like `npm`, but builds flattened dependencies trees (unlike `npm`
which do it recursively). Meaning `npm` fetches the dependencies for each
dependency (may fetch the same a few times), while `bower` expects you to
manually include sub-dependencies. Sometimes `bower` and `npm` are used together
for front-end and back-end respectively (since each megabyte might matter on
front-end).
* `grunt` and `gulp` are task runners to automate everything that can be automated
(i.e. compile CSS/Sass, optimize images, make a bundle and minify/transpile it).
* `grunt` vs. `gulp` (is like `maven` vs. `gradle` or configuration vs. code).
Grunt is based on configuring separate independent tasks, each task
opens/handles/closes file. Gulp requires less amount of code and is based on
Node streams, which allows it to build pipe chains (w/o reopening the same file)
and makes it faster.
* `webpack` (`webpack-dev-server`) - Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph. 
* `npm`/`bower` + plugins may replace task runners. Their abilities often
intersect so there are different implications if you need to use `gulp`/`grunt`
over `npm` + plugins. But task runners are definitely better for complex tasks
(e.g. "on each build create bundle, transpile from ES6 to ES5, run it at all
browsers emulators, make screenshots and deploy to dropbox through ftp").
* `browserify` allows packaging node modules for browsers. `browserify` vs
`node`'s `require` is actually [AMD vs
CommonJS](https://addyosmani.com/writing-modular-js/).

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack)
### Q7: What's the difference between webpack loaders and plugins?
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐⭐

* **Loaders** work at the individual file level during or before the bundle is generated.
* **Plugins** work at bundle or chunk level and usually work at the end of the bundle generation process. Plugins can also modify how the bundles themselves are created. Plugins have more powerful control than loaders.

<div class="text-center">
<img src="https://i.stack.imgur.com/P7hTM.png" class="img-fluid" style="max-width: 500px;">
</div>

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/37452402/webpack-loaders-vs-plugins-whats-the-difference)
### Q8: Explain this code
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐⭐

 ```javascript
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  filename: 'common.js',
  chunks: ['home', 'dashboard']
})
 ```

---
The **CommonsChunkPlugin** is built-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in cache for later use. This results in pagespeed optimizations as the browser can quickly serve the shared code from cache, rather than being forced to load a larger bundle whenever a new page is visited.

This code creates separate file: `common.js` which contains common modules from home and dashboard chunks.  

🔗 **Source:** [webpack.js.org](https://webpack.js.org/concepts/loaders/)
### Q9: Describe tree shaking mechanism in webpack
> Topic: **Webpack**<br/>Difficulty: ⭐⭐⭐⭐⭐

**Tree shaking** is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. 

You can imagine your application as a tree. The source code and libraries you actually use represent the green, living leaves of the tree. Dead code represents the brown, dead leaves of the tree that are consumed by autumn. In order to get rid of the dead leaves, you have to shake the tree, causing them to fall.

If your code did have some side effects (code that performs a special behavior when imported) though, use `sideEffects` property:
```javascript
{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}
```

🔗 **Source:** [webpack.js.org](https://webpack.js.org/concepts/loaders/)

> *Thanks 🙌 for reading and good luck on your interview!* <br/>*Check more FullStack Interview Questions & Answers on 👉 [www.fullstack.cafe](https://www.fullstack.cafe)*