My Webpack Learning

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.

})

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

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.

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 have different configuration files for different environments?

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

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.

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.

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

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]

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 does webpack do? (high-level

no code splitting),1. find the entry file and load its contents into memory

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

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

webpack 2+

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

How can you generate a Webpack config file automatically?

Use "webpack-cli init"

3 approaches to code splitting

- Entry Points: Manually split code using entry configuration.

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.

Module resolution for files

- if has extension will be bundled straight away

Do loaders work in a synchronous or an asynchronous way?

Both. Loaders can work synchronous or asynchronous.

Where does import come from?

ES2015

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

JavaScript files depends on each other. Webpack recognizes these dependencies. 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).

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)

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

UglifyJS plugin.

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.

@import

inside CSS/SASS/LESS files

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 types of code generated by webpack

1. The source code you, and maybe your team, have written.

Which version(s) of webpack support code splitting?

All versions

What is an Entry Point?

An Entry Point is a JavaScipt execution point where Webpack starts a bundle build from. It includes all unique module dependencies of this point/file to successfully execute.

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

What is a bundle?

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

Comparing Webpack vs Grunt

Compared to Grunt, Webpack offers more flexibility and advanced functionality for modern front-end projects. It contains a functional core that is extended using loaders (code mappers) and plugins (code modifiers). It is optimized for bundling JavaScript modules along with non-JavaScript (images, fonts, CSS, etc.).

Browser compatibility

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

How do the performance characteristics between Webpack, Gulp, and Grunt compare?

Gulp & Grunt work on fixed file paths based on direct configuration. Webpack analyzes the entire project, processing dependencies wholistically, processes them with loaders to produce bundled chunks of JS.

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.

Where should loaders be defined?

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

What is a loader in Webpack?

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

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

No, it's now included by default.

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

How to enable source maps in webpack bundles?

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

How to remove unused selectors from css using webpack?

Using purifycss-webpack plugin

Is it possible to define multiple configurations for different environments?

Yes

dead code elimination - after bundling - exclude dead code (start with everything

and work backwards)

plugins - webpack is just a bundler

but we can influence the output through plugins, even extend capability of native compilation

What out of the box module design patterns does Webpack support?

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

What runtime environment does Webpack require?

node.js

Describe tree shaking mechanism.

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

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.

define

require statement,AMD

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.

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)

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

webpack 2+

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.

chunks: ['home'

'dashboard']

require()

CommonJS

Name some plugins you think are very important and helpful

CommonsChunkPlugin, DefinePlugin, HtmlWebpackPlugin, ExtractTextWebpackPlugin, CompressionWebpackPlugin

What is a bundle in Webpack?

A bundle is an output JavaScript file generated by Webpack. It contains JS modules which are the application. webpack.config.js controls the bundle(s) generation process.

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.

)

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 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 main difference between Webpack and other build tools like Gulp or Grunt?

Webpack is a module bundler in contrast to Gulp & Grunt task runners. Webpack supports code splitting, allowing developers to customize builds to their unique situations, working around solutions that don't function properly out of the box.

What is Webpack's config file format?

Webpack's config file is JavaScript file returning a configuration object in the commonjs module flavor.

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.