webpack

What is the advantage of CompressionPlugin?

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.

Pros and cons: code splitting by entry point

Cons: - If there are any duplicated modules between entry chunks they will be included in both bundles. - It isn't as flexible and can't be used to dynamically split code with the core application logic.

Describe CommonsChunkPlugin

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.

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

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

How to remove unused selectors from css using webpack?

Using purifycss-webpack plugin

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

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

How can we generate webpack config file automatically?

Using webpack-cli init

Is it possible to define multiple configurations for different environments?

Yes

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

Yes

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

Yes, its possible to chain loaders.

Is it possible to write your own plugin

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

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

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.

Differences between JS modules

https://medium.com/computed-comparisons/commonjs-vs-amd-vs-requirejs-vs-es6-modules-2e814b114a0b

Where should loaders be defined?

in the config's object's rules property (with test and use property defined)

@import

inside CSS/SASS/LESS files

How does bundling minimize the number of times your app has to wait while the browser starts a new request in HTTP/1?

instead of separate and multiple css, js files (it could just be requested as one bundle where you only request for one file instead of multiple files)

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

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.

Name loaders you think are very important and helpful

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.

Module resolution

resolver - library which helps in locating a module by its absolute path - helps find the code that needs to be included in the bundle (other modules or libraries)

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

webpack 2+

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

webpack 2+

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

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).

Describe a plugin in webpack

Plugins used to customize webpack's build process in a variety of ways (bundle optimization, asset management and injection of environment variables) 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]

What is a loader in webpack

Loaders are transformations that are applied on the source code of a module so that they turn into a module that could be referenced in the dependency graph - can supports modules written in a variety of languages and preprocessors, via loaders. - describe to webpack how to process non-javaScript modules and include these dependencies into your bundles - work at the individual file level during or before the bundle is generated - out of the box - webpack only understands JS and JSON

require()

CommonJS

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

No, it's now included by default.

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

Yes, read more (https://aishwaryavaishno.wordpress.com/2017/04/17/webpack-configuration-for-multiple-environments/)

What is difference between hash and chunkhash

[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.

In which environment does webpack work?

node.js

What is webpack?

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.

What is the format of webpack's config file?

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

What analyzing tools you use to inspect your webpack bundle?

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

On which platform is webpack-dev-server developed?

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

3 approaches to code splitting

- Entry Points: Manually split code using entry configuration. - Prevent Duplication: Use the SplitChunksPlugin to dedupe and split chunks. - Dynamic Imports: Split code via inline function calls within modules

Module resolution for files

- if has extension will be bundled straight away - and if the extension is in resolve.extensions

What does webpack do? (high-level, no code splitting)

1. find the entry file and load its contents into memory 2. match certain text within the content and evaluate those (for e.g. @import) 3. find the dependencies based on previous evaluation and do the same with them 4. stitch them all into a bundle in memory 5. write the results to file system loaders - to be able to process and bundle non JS files plugins - webpack is just a bundler, but we can influence the output through plugins, even extend capability of native compilation

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

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).

Do loaders work in a synchronous or an asynchronous way?

Both. Loaders can work synchronous or asynchronous.

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

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

What is a bundle?

CSS and JS or other files in an application to be made together?

Name some plugins you think are very important and helpful

CommonsChunkPlugin, DefinePlugin, HtmlWebpackPlugin, ExtractTextWebpackPlugin, CompressionWebpackPlugin

Where does import come from?

ES2015

Browser compatibility

ES5 compliant (since need Promise) (if need to use older browsers, need polyfill)

What is Hot-Modules-Replacement?

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.

What is the difference between loader and plugin

Loaders do the pre-processing transformation of virtually any file format when you use sth like require("my-loader!./my-awesome-module") in your code. Compared to plugins, they are quite simple as they (a) expose only one single function to webpack and (b) are not able to influence the actual build process. - work at the individual file level during or before the bundle is generated - so that the bundle can work with any file type Plugins on the other hand can deeply integrate into webpack because they can register hooks within webpacks build system and access (and modify) the compiler, and how it works, as well as the compilation. Therefore, they are more powerful, but also harder to maintain. - work at bundle or chunk level and usually work at the end of the bundle generation process https://stackoverflow.com/questions/37452402/webpack-loaders-vs-plugins-whats-the-difference/38281240#38281240

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

UglifyJS plugin.

How to enable source maps in webpack bundles?

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

What is a bundle in webpack?

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.

Which modules design patterns webpack supports out of the box?

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

How to do dynamic imports

import() syntax - each import() are treated as a separate chunk

Describe tree shaking mechanism.

only includes the bits of code your bundle actually needs to run

Modes in webpack

setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. - default value is production.

What is difference between tree shaking and dead code elimination.

tree-shaking - only include live code that is needed that the bundle actually needs to run (start with what you need, and work outwards) dead code elimination - after bundling - exclude dead code (start with everything, and work backwards) result should be the same - but difficult to do dead code elimination because of the difficulty of static JS analysis

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

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

Resource hinting (how to do)

- tells the browser that this is a resource that is probably needed for some navigation in the future. - import(/* webpackPrefetch: true */ "...") - <link rel="prefetch"> - <link rel="preload">

define, require statement

AMD

Which version(s) of webpack support code splitting?

All versions

Module resolution for folders

- If the folder contains a package.json file, then fields specified in resolve.mainFields configuration option are looked up in order, and the first such field in package.json determines the file path. - If there is no package.json or if the resolve.mainFields do not return a valid path, file names specified in the resolve.mainFiles configuration option are looked for in order, to see if a matching filename exists in the imported/required directory. - The file extension is then resolved in a similar way using the resolve.extensions option.

Preloading vs prefetching

- prefetch - tells the browser that this is a resource that is probably needed for *future* navigation (pitfall: may not eventually be used); starts loading after parent chunk - preload - tells the browser that this is a resource that is definitely needed for *current* navigation, but will be discovered later; starts loading with parent chunk (no waterfall requests); allowing you to force the browser to make a request for a resource without blocking the document's onload event (https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)

3 types of code generated by webpack

1. The source code you, and maybe your team, have written. 2. Any third-party library or "vendor" code your source is dependent on. 3. A webpack runtime and manifest that conducts the interaction of all modules.

What is an entry point?

The entry object is where webpack looks to start building the bundle (it will include any dependencies of this file(s)), at this point the application starts executing.

Explain this code { test: /\.scss$/, loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap', 'postcss-loader'], exclude: /node_modules/ }

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: postcss-loader - transforms postcss to sass code. sass-loader - transforms sass to plain css. css-loader - reads css file, resolves import and url(...) statements. 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.

Explain this code new webpack.ContextReplacementPlugin( /moment[\/\\]locale/, /(en-gb|en-us)\.js/ )

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/.

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

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.

Describe the webpack runtime and manifest.

runtime, along with the manifest data, is basically all the code webpack needs to connect your modularized application while it's running in the browser. It contains the loading and resolving logic needed to connect your modules as they interact. This includes connecting modules that have already been loaded into the browser as well as logic to lazy-load the ones that haven't. Manifest - managest interactiong between all required modules (since split to different modules) As the compiler enters, resolves, and maps out your application, it keeps detailed notes on all your modules. This collection of data is called the "Manifest," and it's what the runtime will use to resolve and load modules once they've been bundled and shipped to the browser. No matter which module syntax you have chosen, those import or require statements have now become __webpack_require__ methods that point to module identifiers. Using the data in the manifest, the runtime will be able to find out where to retrieve the modules behind the identifiers.

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

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.