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

Q1: What is webpack?

Topic: Webpack
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

Q2: Name some benefits of using webpack

Topic: Webpack
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 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

Q3: Name some plugins you think are very important and helpful

Topic: Webpack
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

Q4: Webpack gives us a dependency graph. What does that mean?

Topic: Webpack
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":

<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

Q5: List some pitfalls of Webpack

Topic: Webpack
Difficulty: ⭐⭐⭐⭐

Webpack isn't perfect and has some pitfalls.

• The documentation is awful. The language is often confusing, such as "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.
• Configuring Webpack is a minefield for newcomers. The configuration file syntax is confusing. It helps to look at established examples from boilerplate projects.
• Webpack is maintained mostly by one person. The rapid community adoption and the thrust into the spotlight 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, 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

Q6: Explain me the difference between NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack?

Topic: Webpack
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.

🔗 Source: stackoverflow.com

Q7: What's the difference between webpack loaders and plugins?

Topic: Webpack
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.

🔗 Source: stackoverflow.com

Q8: Explain this code

Topic: Webpack
Difficulty: ⭐⭐⭐⭐

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

Q9: Describe tree shaking mechanism in webpack

Topic: Webpack
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:

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js"
  ]
}

🔗 Source: webpack.js.org

Thanks 🙌 for reading and good luck on your interview!
Check more FullStack Interview Questions & Answers on 👉 www.fullstack.cafe