Bundling with Webpack Introduction ans MCQs Solution

Webpack: How It Generates the Bundle

Bundle

File that contains all the modules your application needs. In other words, it is how the application is packaged.

Dependency Graph

When a file depends on another webpack, it recursively builds a graph with all dependencies needed to generate the bundle.

Entry Point

It is the file that webpack uses to start resolving the dependency graph.

Output

The name of the file or files and the path where webpack will generate the bundles containing the dependency graph.

Loader

These modules are responsible for processing different kind of files. They are transformed into JavaScript modules that can be understood by webpack.

Later, the modules can be added to the bundle file.

Plugin

Plugins are modules that can perform many tasks, some examples are,

  • Extract text (CSS) from your bundles into a separate file.
  • Replace just the module changed instead of refreshing the whole page (Enable Hot Module Replacement).

Tapable

Tapable is a library that allows us to add plugins to a module. This is possible because every Class and Object that extends Tapable emits events that plugins can hook into to add functionality.

module.exports = options => {
return {
entry: {
'bundle': path.resolve(__dirname, './test.js')
},
output: {
filename: '[name].js',
}
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'çss-loader']
}
]
}
plugins: [
new customPlugin({
options: 'nothing'
})
]
}
}

The above is an example of a simple webpack configuration file,entryThe entry file is called test.js.outputThe output file will be called bundle.js because of the [name].js in the filename property.moduleThese are the loaders configuration.

How Do Loaders Work?

Webpack can deal only with JavaScript to generate the bundle. Loaders take care of transform them modules into JavaScript code.

We have to tell webpack what kind of files the loader will process, which directory to exclude (if needed), and the loader to use for that. All of this is included in the rules property.

If webpack finds a file import that matches the pattern for the name we indicated, it starts to build a bundle file. Webpack passes the file to the loader and the loader returns JavaScript code that is added to the bundle file.

Loaders are chainable. This means that the result of some loader processing could be the entry of another loader.

        {
test: /\.css$/,
use: [ 'style-loader', 'çss-loader']
}

This is an example of chainable loaders, this always works from right to left. The CSS-loader is in charge of reading CSS files. It resolves the references to another files (import and url). Then, the result is passed to the style-loader that inserts the CSS into the file.

One thing that loaders cannot do is to modify the actual build process. They don’t have access to the compiler and compilation process.

Click here to read more Technical Interview Questions and Answers

Bundling with Webpack Q&A

1. Webpack is not recommended for large web applications 

Answer:- FALSE

2. Which of the following code can help us make the compilation automatically 

Answer:- build: “webpack ./src/app.js ./dist/bundle.js”

3. Which of these softwares is necessary to install webpack 

Answer:- Node.js

4. Executing the following command will automatically create a file named: webpack_practice >> npm init 

Answer:- package.json

5. The distinct feature of webpack is 

Answer:- Code-Splitting

6. Which of the following tells webpack how to treat a Bundled Code 

Answer:- output

7. Which of the following loader can be used to process style sheets 

Answer:- CSS-loader

 8. file:///home/ram/work/webpack_practice/index.html means that the file gets loaded from

Answer:-local machine

9. Which helps in using babel with webpack babel

Answer:-Loader

10. _____________ simplies the creation of HTML files to serve webpack bundles

Answer:- HtmlWebpackPlugin

11. Which of the following features, considered the backbone of  Webpack  

Answer:- plugins

12. Which of the following code snippet instantiates the plugin FrescoPlugin require “var FrescoPlugin = require(‘Welcome’);

Answer:- var webpackConfig = {

  // … config settings here …

  plugins: [

    new FrescoPlugin({options: true})

  ]

};”

13. Plugins are instantiable objects 

Answer:- TRUE

14. Which of the following, can be used to define an entry point? 

Answer:- module.exports={entry:

15. Webpack is a/an ______________ tool  o

Answer:- pen source

16. Webpack understands only __________________ 

Answer:- Java script

17. Webpack is written in 

Answer:- Javascript

 18. can be transformed to JavaScript with the help of loaders

Answer:- CoffeeScript

19. Custom plugins can be installed via ___________

Answer:- Both

20. Which of these softwares is necessary to install webpack 

Answer:- None

21. Webpack can be optimized with the following command 

Answer:- webpack –optimize -minimize

22. A plugin can be instantiated with the keyword 

Answer:- New

23. Which of the following makes Webpack s

Answer:- Extensible loader

24. Webpack starts building the dependency graph from 

Answer:- Loaders

25. Webpack supports third party libraries 

Answer:- TRUE

26. which of the following is a Node.js express server?

Answer:- webpack-dev-server

27. The latest version of Webpack is

Answer:- 2.X

28. Which of the following webpack feature enables Code on Demand

Answer:- Code Splitting 

29. Which of the following code can be used to install the style loader?

Answer:-node install style-loader – save-dev

30. In Webpack, we can use

Answer:- Both 

31. Which of the following makes Webpack extensible

Answer:- Plugins

32. CoffeeScript can be transformed to JavaScript with the help of

Answer:- Plugins

Click here to read more Blogs

About Author


After years of Technical Work, I feel like an expert when it comes to Develop wordpress website. Check out How to Create a Wordpress Website in 5 Mins, and Earn Money Online Follow me on Facebook for all the latest updates.

Leave a Comment