1. What do you say when asked about Webpack?

Webpack answers in two main ways

(1) Webpack construction process and basic configuration;

(2) How to use Webpack to optimize the project;

Webpack project construction mainly includes the following steps (1NPM init creates a package.json file that describes the dependencies of a package.json file. DevDependencies, devDependencies, devDependencies, devDependencies, devDependencies2Config. js file, which contains entry(import by path), output (export file, which contains two configurations, one is fileName, the other is path of the file, where to put the export file, the default is under the dist folder, Dist file, which is to be run in production)3)module(Needless to say, my personal understanding of this is as long as it is a document or within a documentimportA code block or media file referenced by, etc., can be considered as onemodule). (4Plugins are enhancements to Webpack. Plugins are used to optimize bundle files, manage resources, and inject environment variables. What are common plugins?CommonsChunkPlugin: Extract chunks of the same module code into common JSCleanWebpackPlugin: Cleans up the build directoryExtractTextWebpackPluginExtract the CSS from the bundle into a separate CSS fileCopyWebpackPlugin: copies files or folders to the build's output directoryHtmlWebpackPlugin: Creates an HTML file to host the output bundleUglifyjsWebpackPluginJs: compressionZipWebpackPlugin: Generate a ZIP package for the packaged resources.Copy the code

2. Configure the WebPack

Entry: Entry, the first step in the build that Webpack performs will start with Entry, which can be abstracted into input.

Module: Module, in Webpack everything is a Module, a Module corresponds to a file. Webpack recursively finds all dependent modules starting from the configured Entry.

Chunk: a Chunk is a code block. A Chunk is composed of multiple modules for code merging and splitting.

Loader: module converter, used to convert the original content of a module into new content as required.

Plugin: Extension Plugin that injects extension logic at specific points in the Webpack build process to change the build result or do what you want.

Output: Outputs the result after Webpack has gone through a series of processes and produced the final desired code.

Webpack.config.js file configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development'.// Development mode
    entry: {
      main:path.resolve(__dirname,'.. /src/main.js'),
      header:path.resolve(__dirname,'.. /src/header.js')},output: {
      filename: '[name].[hash:8].js'.// The packaged file name
      path: path.resolve(__dirname,'.. /dist')  // The packaged directory
    },
    plugins: [new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'.. /public/index.html'),
        filename:'index.html'.chunks: ['main'] // The module name corresponding to the entry file
      }),
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'.. /public/header.html'),
        filename:'header.html'.chunks: ['header'] // The module name corresponding to the entry file]}}),Copy the code

2. What are the common Loaders? Which loaders have you used?

Raw-loader: load the raw content of the file (UTF-8)

14. file-loader: To export files to a folder and reference the output file in code by a relative URL (processing images and fonts)

Url-loader: similar to file-loader except that you can set a threshold. If the threshold is greater than the threshold, the file will be processed by file-loader. If the threshold is smaller than the threshold, the file base64 encoding (processing images and fonts) will be returned.

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

Svg-inline-loader: Injects compressed SVG content into code

Image-loader: loads and compresses image files

Json-loader loads JSON files (default included)

Handlebars -loader: Compiles the Handlebars template into a function and returns it

Babel-loader: Convert ES6 to ES5

Ts-loader: Converts TypeScript to JavaScript

Awesome-typescript-loader: converts typescript to JavaScript with better performance than TS-Loader

Sass-loader: Converts SCSS/SASS code to CSS

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

Style-loader: Inserts CSS code into JavaScript and loads CSS via DOM manipulation

Postcss-loader: extends the CSS syntax and uses the next generation CSS. It can work with the autoprefixer plug-in to automatically complete the CSS3 prefix

Eslint-loader: Checks JavaScript code through ESLint

Tslint-loader: Checks TypeScript code using tsLint

Mocha-loader: Loads the code for mocha test cases

Coverjs-loader: Calculates test coverage

Vue-loader: loads vue. js single file components

I18n – loader: internationalization

Cache-loader: can be added before some loaders with high performance overhead to cache results to disks

3. What are the common plugins? What plugins have you used?

Define -plugin: Define environment variables (Webpack4 after specifying mode is automatically configured)

Ignore-plugin: ignores some files

Html-webpack-plugin: Simplifies HTML file creation (dependent on html-loader)

Web-webpack-plugin: It is easier to output HTML for a single page application than the html-webpack-plugin

Uglifyjs-webpack-plugin: no SUPPORT for ES6 compression (pre-Webpack 4)

Terser-webpack-plugin: Supports compression of ES6 (Webpack4)

Webpack-parallel-ugli-fi -plugin: Multiple processes perform code compression to improve build speed

Mini-css-extract-plugin: Separate style files, extract CSS as separate files, support on-demand loading (alternative to extract-text-webpack-plugin)

Serviceworker-webpack-plugin: Adds offline caching for web applications

Clean-webpack-plugin: directory cleaning

ModuleConcatenationPlugin: open the Scope Hoisting

Speed-measure-webpack-plugin: you can view the execution time of each Loader and plugin (total packaging time, each plugin and Loader time).

Webpack-bundle-analyzer: Visualize the volume of webpack output files (business components, dependent third party modules)

4. What is the difference between Loader and Plugin?

Loader: Essentially a function that converts the received content and returns the converted result. Since Webpack only knows JavaScript, the Loader acts as a translator, preprocessing the translation of other types of resources.

The Plugin: Plugins, based on the event flow framework Tapable, can extend the functions of Webpack. During the life cycle of Webpack, many events will be broadcast. Plugin can monitor these events and change the output results through the API provided by Webpack at the appropriate time.

Loader: configured in module.rules as the parsing rule for modules. The type is array. Each item is an Object and contains properties such as test(type file), Loader, and Options.

Plugin: Plugins are configured separately in plugins and are of type array. Each item is an instance of the Plugin, and the parameters are passed in through the constructor.

5.Webpack construction process is briefly described

The running flow of Webpack is a sequential process, from start to finish:

Initialization parameters: Read and merge parameters from configuration files and Shell statements to arrive at the final parameters

Start compiling: Initialize the Compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute the object’s run method to start compiling

Identify entry: Locate all entry files according to the entry in the configuration

Compiling modules: Starting from the entry file, call all configured Loader to translate the module, find out the module that the module depends on, and then recurse this step until all the entry dependent files have passed this step

Complete module compilation: After using Loader to translate all modules in Step 4, the final content of each module after translation and the dependencies between them are obtained

Output resources: Assemble chunks containing multiple modules one by one according to the dependency between the entry and modules, and convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content

Output complete: After determining the output content, determine the output path and file name based on the configuration, and write the file content to the file system