Webpack Questions & Answers

Question: What is Webpack?

Answer: Webpack is a powerful open-source bundler and preprocessor that can handle a huge variety of different tasks.

Webpack can take care of bundling alongside a separate task runner. However, the line between bundler and task runner has become blurred thanks to community developed webpack plugins. Sometimes these plugins are used to perform tasks that are usually done outside of webpack, such as cleaning the build directory or deploying the build.

React, and Hot Module Replacement (HMR) helped to popularize webpack and led to its usage in other environments, such as Ruby on Rails. Despite its name, webpack is not limited to the web alone. It can bundle with other targets as well

Question: Why webpack?

Answer: Much like any other aspect of web development, there isn't a standard for which build tool to use. Right now, developers have to choose between webpack, Gulp, Browserify, NPM scripts, Grunt, and like 10 others. There are many in-depth comparisons out there, but all of these tools are very similar, so most of the time it comes down to personal preference and what project you are working on.

Here are some pros and cons to help you decide whether webpack is the tool for you:

Pros:

· Great for working with singe-page apps

· Accepts both require() and import module syntaxes

· Allows for very advanced code splitting

· Hot Reload for quicker development with React, Vue.js and similar frameworks

· Мost popular build tool according to the 2016 JavaScript survey

Cons:

· Not suitable for beginners in web development

· Working with CSS files, images, and other non-JS resources is confusing at first

· Documentation could be better

· Changes a lot, even most 2016 tutorials are already outdated

Concepts

Question: What is webpack?

Answer: webpack is a module bundler for javascript applications. Webpack recursively builds every module in your application, then packs all those modules into a small number of bundles.

Question: What is the main difference between webpack and other build tools like gulp or grunt?

Answer: Webpack is a module bundler, though it is quite often used instead of Gulp or Grunt task runners. This advanced tool provides developers with control of spliting the modules, allowing them to adjust builds to particular situations and workaround solutions that don’t function properly out of the box.

Comparing Webpack vs Grunt, the first of those offers more flexibility and advanced functionality for modern front-end projects. It comes with a functional core and can be extended using particular loaders and plugins. Essentially it is used for bundling JavaScript modules with dependencies into files, but for complex JavaScript applications with lots of non-code assets (images, fonts, CSS, etc.) it can provide great benefits.

Talking about Webpack vs Gulp vs Grunt performance, the two latter look into a defined path for files that match your configuration, while the Webpack analyzes the whole project. It looks through all the dependencies, processes them with loaders and produces a bundled JS file. (source)

Question: What is a bundle in webpack?

Answer: bundle is the output file generated by webpack. It contains all of the modules which are used in application. Bundles generation process is regulated by webpack config file.

Question: In which environment does webpack work?

Answer: node.js

Question: What is an entry point?

Answer: The entry object is where webpack looks to start building the bundle, at this point the application starts executing.

Question: What is a dependency graph and how does webpack build it?

Answer: Any time one file depends on another, webpack treats this as a dependency. Starting from entry point(s), webpack recursively builds a dependency graph that includes every module your application needs, using import and require statements, then packages all of those modules into bundle(s).

Question Which modules design patterns webpack supports out of the box?

Answer common.js, amd and es6 (since webpack 2).

Config file

Question: What is the format of webpack's config file?

Answer: webpack's config file is javascript file in commonjs module pattern.

Question: Is it possible to have multiple entry points in a singe webpack configuration file?

Answer: Yes

Question: Is it possible to define multiple configurations for different environments?

Answer: Yes

Question: How can we generate webpack config file automatically?

Answer: Using webpack-cli init

Loaders

Question: What is a loader in webpack?

Answer: Loaders are transformations that are applied on the source code of a module. webpack supports modules written in a variety of languages and preprocessors, via loaders. Loaders describe to webpack how to process non-javaScript modules and include these dependencies into your bundles.

Question: Where should loaders be defined?

Answer: in the config's object's rules property

Question: Explain this code?

    {

      test: /\.scss$/,

      loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap', 'postcss-loader'],

      exclude: /node_modules/

    }

Answer: This code is intended to transform and load sass files as webpack modules. This config tells to webpack to search for all files which have .scss extension, then applies the following loaders on them, from right to left order:

1. postcss-loader - transforms postcss to sass code.
2. sass-loader - transforms sass to plain css.
3. css-loader - reads css file, resolves import and url(...) statements.
4. style-loader - creates <style> tags in the page's <head> element containing css returned by css-loader.

Due to ?sourceMap at the end of css-loader and sass-loader, source maps for all .scss files will be created.

Question: Do loaders work in a synchronous or an asynchronous way?

Answer: Both. Loaders can work synchronous or asynchronous.

Question: Is it possible to use multiple loaders in the rules single object?

Answer: Yes, its possible to chain loaders.

Question: Name loaders you think are very important and helpful

Answer: raw-loader, url-loader, html-loader, file-loader, style-loader, css-loader, script-loader, babel-loader, loaders for typescript, coffescript, less, sass, pug, markdown, etc.

Plugins

Question: Describe a plugin in webpack

Answer: Plugins used to customize webpack’s build process in a variety of ways. A webpack plugin is a JavaScript object that has an apply property. This apply property is called by the webpack compiler, giving access to the entire compilation lifecycle. Webpack comes with a multiple built-in plugins available under webpack.[plugin-name]

Question: What is the difference between loader and plugin

Answer: https://stackoverflow.com/a/38281240/3283209

Question: What is the advantage of CompressionPlugin?

Answer: CompressionPlugin builds gzip-ed version of bundles. Its possible to simply add server side compression e.g using nginx or expres compression plugin. Server-side compression is not recommended because it addes load on CPU and increases response time.

Question: How to move some data (e.g css code) from a bundle to a separate file in webpack?

Answer: using ExtractTextWebpackPlugin. It moves all the required *.css modules in entry chunks into a separate CSS file. So your styles are no longer inlined into the JS bundle, but in a separate CSS file (styles.css). If your total stylesheet volume is big, it will be faster because the CSS bundle is loaded in parallel to the JS bundle. https://github.com/webpack-contrib/extract-text-webpack-plugin

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

Answer: CommonsChunkPlugin, DefinePlugin, HtmlWebpackPlugin, ExtractTextWebpackPlugin, CompressionWebpackPlugin

Question: Is it possible to write your own plugin?

Answer: Yes, its possible to write your own plugin and use plugins written by community.

Development

Question What are some advantages of using webpack-dev-server over simple http server or nginx?

Answer: webpack-dev-server simplifies development process due to integrated fast in-memory access to the webpack assets and hot-modules-replacement features.

Question: On which platform is webpack-dev-server developed?

Answer: webpack-dev-server is express (node.js) application.

Question: What is Hot-Modules-Replacement?

Answer: Hot-Modules-Replacement(HMR) is webpack feature which allows to update modules in application without page reload. HMR can be used as an advanced replacement for livereload.

Question: How to enable source maps in webpack bundles?

Answer: Using devtool: 'source-map' (there are various other configurations for source maps, view full list here)

Question: How to automatically build and update bundles in the browser after a change in source code?

Answer: Using watch: true and devServer: { hot: true } options together.

Question: What is parallel-webpack and how does it affect webpack's build process

Answer: parallel-webpack useful for webpack configurations with multiple entry points. It allows to run multiple webpack builds in parallel, spreading the work across your processors and thus helping to significantly speed up build.

Optimization

Question: Briefly describe long-term caching and how to achieve it using webpack?

Answer: Browsers should cache static assets to save traffic and users time. But after each change or bugfix, browser have to download newer version of files. The most easy way to achieve this is changing file name. It could be buildId or unique hash in the end of file's name like

    app.js?build=1

    app.js?build=2

or

  app.js.2a6c1fee4b5b0d2c9285.js

  app.js.70b594fe8b07bcedaa98.js

To achieve this using webpack simple configuration should be done

   module.exports = {

    ...

    output: {

     filename: "[name].[hash].js"

    }

    ...

   }

Question: What is difference between hash and chunkhash

Answer: [hash] will generate unique hash for each build and use it for all chunks. Replace [hash] with [chunkhash] to generate unique hashes for each chunk. This is useful when you dont want to re-download vendors (dependencies) file but you have changes in your application code and want to update it.

Question: Describe CommonsChunkPlugin

Answer: 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.

Question: Explain this code

   new webpack.optimize.CommonsChunkPlugin({

     name: 'common',

     filename: 'common.js',

     chunks: ['home', 'dashboard']

   })

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

Question: Which built-in plugin should be used for code minification?

Answer: UglifyJS plugin.

Question: Explain this code

   new webpack.ContextReplacementPlugin(

     /moment[\/\\]locale/,

     /(en-gb|en-us)\.js/

   )

Answer: This code tells to webpack to include only those files which names match to /(en-gb|en-us)\.js/ pattern from /moment[\/\\]locale/ path. It used to optimize final bundle excluding unused locales. So if you need to use e.g french language's locale as well then you should add it to second regex like this: /(en-gb|en-us|fr)\.js/.

Question: How to remove unused selectors from css using webpack?

Answer: Using purifycss-webpack plugin

Question: Why is OccurenceOrderPlugin the part of webpack optimization. What it has to do with module ids and topological sorting?

Answer: OccurenceOrderPlugin order the modules and chunks by occurrence. More module occurs - smaller id it has, this technique helps to reduce bundle size, because a module is used many times will be referenced many times with webpack_require(moduleId).

Question: What analyzing tools you use to inspect your webpack bundle?

Answer: webpack-bundle-analyzer plugin, official webpack analyze tool, webpack visualizer, webpack chart

Migration

Question: Describe LoaderOptionsPlugin

Answer: LoaderOptionsPlugin built especialy for migration from webpack 1 to webpack 2. Options for loaders now should be passed through this plugin's options section, e.g.

webpack 1

  module.exports = {

    eslint: {

      /* your eslint loader config */

    }

  }

webpack 2

  module.exports = {

    plugins: [

      new webpack.LoaderOptionsPlugin({

        options: {

          eslint: {

            /* your eslint loader config */

          }

        }

      })

    ]

  }

Question: Do you need to include OccurenceOrderPlugin in the plugins section when use webpack 2/3?

Answer: No, it’s now included by default.

Question: Which version(s) of webpack support es6 modules out the box?

Answer: webpack 2+

Question: Which version(s) of webpack support json-loader out the box?

Answer: webpack 2+

Question: Which version(s) of webpack support code splitting?

Answer: All versions

Advanced questions

Question: Describe the webpack runtime and manifest.

Answer: https://webpack.js.org/concepts/manifest/

Question: Is it possible to use other languages (except javascript) for the webpack config file?

Answer: Yes, webpack accepts configuration files written in multiple programming and data languages, such as typescript, coffeescript, babel and jsx. The list of supported file extensions can be found here.

Question: Is it possible to have different configuration files for different environments?

Answer: Yes, read more here

Question: Describe tree shaking mechanism.

Answer: https://webpack.js.org/guides/tree-shaking/

Question: What is difference between tree shaking and dead code elimination.

Answer: https://medium.com/@Rich_Harris/tree-shaking-versus-dead-code-elimination-d3765df85c80