1. What is Webpack?

Webpack is a static module packaging tool for modern javascript applications

2. What are the webPack configurations?

Entry, output,mode, Plugin,loader;

Entry: Indicates which module WebPack uses to start building its internal dependency graph. The default value is./ SRC /index.js.

Exit: Tells WebPack where to output the bundles it creates and how to name them. The default value for the main output file is’./dist/main.js’.

Mode: Provides mode configuration options that tell WebPack to use the built-in optimizations for the appropriate mode,development, Production, And None (without any default optimizations).

Loader: This is a built-in capability available out of the box for WebPack. Loader is used to convert certain types of modules (compile-compatible).

Plugin: Package optimization, resource management, injection of environment variables, etc. (capability extension).

3. What does WebPack do?

Module packaging, compilation compatibility, capability extension

Module packaging. You can package files from different modules together and ensure that they are referenced correctly and executed in order. With packaging, we can freely divide the file modules according to our own business during development, ensuring a clear and readable project structure.

Compile compatibility. The WebPack Loader not only helps you polyfill your code, but also compiles and converts files such as.less,.vue,.jsx that are not recognized by the browser. This allows you to use new features and syntax to develop and improve your development efficiency.

Capability expansion. With the Plugin mechanism of WebPack, we can further implement a series of functions such as loading on demand, code compression and so on, on the basis of achieving modularized packaging and compilation compatibility, helping us further improve the degree of automation, engineering efficiency and the quality of packaging output.

4. How does module packaging work?

1, read webPack configuration parameters; 2. Start WebPack, create the Compiler object and start parsing the project; 3. Start parsing from entry files, find the imported dependency modules, and recursively iterate analysis to form a dependency tree; 4. Use the corresponding Loader to compile the dependent module files of different file types, and finally convert them into Javascript files; 5. During the process, WebPack throws out several hooks via publish/subscribe mode, and the WebPack plug-in can intervene in the output by listening to these key event nodes and performing the plug-in task.

5. How does sourceMap work?

When it comes to sourceMap, many people immediately think of the DevTool parameter in the Webpack configuration, and the corresponding eval, eval-cheap-source-map, and other optional values, and what they mean. In addition to knowing the differences between different parameters and performance differences, let’s take a look at how sourceMap is implemented. SourceMap is a technology that maps compiled, packaged, and compressed code back to source code. Because packaged and compressed code is not readable, it is a very bad experience to debug a problem in confused code if an error or a problem occurs during development. SourceMap helps us quickly locate source code and improve our development efficiency. SourceMap is not a webpack-specific feature, but Webpack supports sourceMap, like JQuery supports souceMap.

6. What common Loaders are available?

File-loader: Outputs a file to a folder and references the output file in code relative to the URL (processing images and fonts). Url-loader: Similar to file-loader, the difference is that the user can set a threshold. If the threshold is greater than the threshold, file-Loader will process the threshold. If the threshold is less than the threshold, source-map-loader will return the base64 encoding of the file (processing images and fonts). Load additional Source Map files to facilitate breakpoint debugging of SVG-inline-loader: Load and compress the image file json-loader Loads the json file (default included) handlebars-loader: To compile the Handlebars template into a function and return babel-Loader: to convert ES6 to ES5 TS – Loader: To convert TypeScript to JavaScript awesome-typescript-loader: To convert TypeScript to JavaScript for better performance than TS-loader sass-loader: CSS – Loader: loads the CSS and supports features such as modularization, compression, and file import. To inject CSS code into JavaScript, use DOM operations to load the CSS postcss-Loader: Eslint-loader: Check JavaScript code tslint-Loader: check JavaScript code tslint-Loader: Checking TypeScript code with TSLint mocha-loader: code that loads mocha test cases Coverjs-loader: Calculates test coverage vue-loader: loads the vue.js single-file component i18n-loader: Internationalized cache-loaders: Can be added before some performance expensive loaders in order to cache results to disk.

7. What are the common plugins?

Ignore-plugin: ignores part of the file html-webpack-plugin: Simplified HTML file creation (depending on htmL-loader) Web-webpack-plugin: This plugin can easily output HTML for single-page applications, and is much easier to use than the html-webpack-plugin: ES6 Webpack-parallel-Uglify-plugin: Multi-process code compression for faster build times Separate the style files and extract the CSS into a separate file to support on-demand loading (instead of extract-text-webpack-plugin). For web application increase offline caching features clean – webpack – plugin: clear directory ModuleConcatenationPlugin: open the Scope Hoisting speed – measure – webpack – the plugin: You can see how much time each Loader and Plugin takes to execute webpack-bundle-Analyzer: Visualize the volume of webPack output files (business components, dependent third-party modules)

Reference article: juejin.cn/post/684490…