Continuously updated…

Interview portal:

  • Interview question: HTTP
  • Interview question: HTML+CSS
  • Interview question: JS
  • Interview question: Vue
  • Interview Questions: Hiring Personnel (non-technical questions)

webpack

Familiar with the common configuration of Webpack, able to build front-end environment and optimize the project;

001. Tell me what you think of Webpack:

Webpack is a module packaging tool that you can use to manage module dependencies in your project and compile the static files needed to output your modules. It can well manage and package the HTML,CSS,JavaScript and static files (images, fonts) used in development, so that development is more efficient. Webpack has module loaders for different types of dependencies, analyzes dependencies between modules, and merges them to generate optimized static resources.

002. The basic functions and working principles of Webpack?

File optimization: Compress JavaScript, CSS, HTML code, compress merged images and other code segmentation: Extracting multiple pages of common code, the code does not need to be performed to extract the first screen section allows the asynchronous loading module combination: in a modular program there are a lot of modules and files, need to build functional module sort merge into one file Automatically refresh: to monitor the change of local source code, automated build, refresh the browser code check: Code compliance needs to be checked before it is submitted to the repository, and unit tests pass automatic distribution: after updating the code, the automatic build distributes the code online and to the distribution system.

003. Webpack construction process:

The module configured in an entry is recursively parsed to all modules that the entry depends on. When a module is found, the module will find the corresponding conversion rule based on the configured Loader.

After the module is converted, the modules that the current module depends on are parsed. These modules are grouped in the unit of entry. An entry and all its dependent modules are allocated to a Chunk group.

Finally, WebPack converts all chunks into files for output and executes the logic defined in plugin at appropriate times throughout the process

004. Webpack packaging principle:

Bundle all dependencies into a bundle.js and load them on demand by splitting the code into unit fragments.

005. What is entry,output?

The entry entry tells WebPack which module to use as the starting point for building the project./ SRC /index.js by default

The output export, which tells WebPack where to output its packaged code and how to name it, defaults to./dist

006. What are loaders and plugins?

Loader is used to tell Webpack how to convert a certain type of file and import it into the packaged file. Plugins are much more useful for packaging optimization, resource management, and injection of environment variables

007. What is bundle,chunk,module?

Bundle is a file packaged by Webpack, and chunk is a code block separated by webpack’s code during module dependency analysis. A module is a single module in development

008. What should I pay attention to when packing NPM? How can WebPack be used for better builds?

Improve basic information; Define dependencies; Ignore files; Play tag;

009. What are the common loaders? What problems do they solve?

File-loader: To export files to a folder and reference the output file through a relative URL in the code;

Url-loader: similar to file-loader, but can base64 file content into the code if the file is very small;

Source-map-loader: loads additional source map files to facilitate breakpoint debugging;

Image-loader: loads and compresses image files.

Babel-loader: convert ES6 to ES5;

Css-loader: loads the CSS and supports features such as modularization, compression, and file import.

Style-loader: to inject CSS code into JavaScript and load CSS using DOM manipulation.

Eslint-loader: checks JavaScript code through ESLint;

010. The webpack specification:

Webpack defaults to the CommonJS specification module.exports

There are two modes of packaging with WebPack: development mode: mainly used for testing, code debugging, etc. Production mode: Performance considerations, compression if there are no plug-ins, not compression;

By default, the webpack configuration file is called webpack.config.js. You can specify the webpack configuration file name with –config

011. Configuration process:

Can you try to configure the scaffolding? can

012.loader:

The CSS requires two Loaders: CSs-loader style-loader

Postcss-loader provides a way to use JavaScript code to handle CSS. It is responsible for parsing CSS code into an Abstract Syntax Tree (AST) and handing it over to plug-ins for processing.

-webkit-transform: rotate(45deg); transform: rotate(45deg);

The mini-CSS-extract-plugin used to introduce internal styles, packaging CSS into a single CSS file and introducing CSS in the index.html file

Optimize – CSS-assets -webpack-plugin CSS can not compress JS, and then there is a plugin that can compress JS file loader is to let webpack pack images Url-loader can convert images to Base64, and webpack can package images

Webpack does not support the advanced syntax of JS by default, so use Babel; Babel transformation; npm i @babel/core @babel/preset-env babel-loader –save-dev

013.plugins:

The html-webpack-plugin generates an HTML file based on the module and no longer creates an index file under the dist folder

I need to create a new index file in public that generates index.html in memory from this template file and automatically import bundle.js

Clean-webpack-plugin Removes unused modules

014. What is the difference between loader and plugin?

  • Loader enables WebPack to load and parse non-JS files
  • Plugin can extend the functionality of WebPack to make it more flexible. You can change the output during the build through the WebPack API