WebPack 4

Question 1

What is webpack?

Answer 1

Webpack is a build tool that allows us to take all of our assets and turn them into a production-ready bundle.

Question 2

What are all of our files considered in webpack?

Answer 2

Modules.

Question 3

What are top three benefits of working with webpack?

Answer 3

1. Require assets, load when needed
2. Code splitting – load only the code that the page requires, minimise initial loading time.
3. Transformations – React/ES6 to vanilla JS, Sass/Less to CSS, etc.

Question 4

What’s new in webpack 4?

Give 4 answers.

Answer 4

1. No more support for Node.js 4
2. Up to 98% faster
3. Dev and production mode
4. Support for WebAssembly

Question 5

What’s the difference between dev and production mode?

Answer 5

In production mode, the build size is prioritised.

In dev mode, the speed of the build is optimised.

Question 6

How do you run webpack in watch mode?

Answer 6

By using the -w flag.

Question 7

What’s the default config for webpack?

Answer 7

webpack.config.js

Question 8

How do you specify a custom config file for webpack?

Answer 8

By using the –config flag.

Question 9

What do webpack loaders help us with?

Give 3 answers.

Answer 9

1. Perform transformations on files
2. Help load files and images
3. Deal with dialects

Question 10

How do you specify the starting file of your project in the webpack config?

Answer 10

By using the ‘entry’ key inside module.exports

Question 11

How do you specify the output file for your project in the webpack config?

Answer 11

By using the ‘output’ key inside module.exports to specify an object with two keys: ‘filename’ and ‘path’. ‘filename’ is the name of the file wherease the ‘path’ is where to put this file, which you can specify by using path.resolve and passing it two parameters: __dirname and the name of the folder you want to be created at the root of the project for bundling.

Question 12

How do you specify what loaders to use and how in webpack config?

Answer 12

By using the ‘module’ key inside module.exports object and assigning it an object with the key ‘rules’, which is an array containing objects. In each object, you create a ‘test’ key to specify the filter for which files to use the loader for and ‘use’ to specify which loaders to use. Use is an array of objects that each has a key of ‘loader’, specifying the name of the loader. You can also use the ‘exclude’ key in rule objects to specify what file/folders to exclude. For example, commonly, you exclude node_modules from the babel-loader.

Question 13

What webpack loaders can you use to load .css files?

Answer 13

style-loader and css-loader

Question 14

What webpack loader can you use to load images?

Answer 14

url-loader

Question 15

What does code splitting do?

Answer 15

It breaks up your code into different bundles. This can be done using multiple entrypoints.