Webpack build process

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

In the above process, Webpack will broadcast a specific event at a specific point in time, the plug-in will execute a specific logic after listening for the event of interest, and the plug-in can call the API provided by Webpack to change the running result of Webpack

In a nutshell

  • Initialization: start build, read and merge configuration parameters, load Plugin, instantiate Compiler

  • Compilation: Starting from Entry, the corresponding Loader is successively called for each Module to translate the content of the file, and then the Module that the Module depends on is found and compiled recursively

  • Output: Combine compiled modules into chunks, convert chunks into files, and output them to the file system

Links to the above content: juejin.cn/post/684490…

Webepack common basic configuration entry, output, plugins, module (configure loader)

entry: {

bundle: [

‘babel-polyfill’,

‘./src/index.js’,

].

},

output: {

filename: ‘[name]_[chunkhash].js’,

path: path.resolve(__dirname, ‘dist/static’),

PublicPath:, // For packaged JS

},

// Not yet completed

Optimize the Webpack packaging process, I work commonly used

1.happypack

When building a project using Webpack, a large number of files are parsed and processed. As the number of files increases, Webpack components become slower. Since Webpack running on Node.js is a single-threaded model, the tasks that Webpack needs to process are handled one by one.

Happypack splits the file parsing task into multiple sub-processes to execute concurrently. The child processes the task and then sends the result to the main process. Therefore, the speed of project components in Webpack can be greatly increased

2.DLL

Use DllPlugin for subcontracting, use DllReferencePlugin(index link) to reference manifest.json, so that some of the basically unchanged code is first packaged into static resources, so as to avoid wasting time repeatedly compiling.

3.Tree shaking

Detect and mark modules that are not referenced in the project during packaging, remove them from the final bundle when resources are compressed (only for ES6 Modlue), use ES6 Module modules whenever possible in development, improve Tree Shaking efficiency

Disable module dependency resolution for Babel-loader, otherwise Webpack receives converted CommonJS modules and cannot tree-shaking them

4.sourcemap

Mode recommends devTools for development :cheap-module-eval-source-map

Production is generally not used to reduce packaging volume. Devtools :cheap-module-source-map is recommended if you need to restore compressed JS errors for online problems and quickly locate anomalies

5.code splitting

For example, if a service file introduces many third-party modules or other service modules, the imported modules will be packaged and divided into new files. In this case, the modification of the service file only needs to be recompiled. The whole file and imported modules do not need to be recompiled and packaged together

1. Synchronize the code, as configured in webepack.config.js

optimization: { 

splitChunks: {

chunks: ‘all’

     }

}

2. Async code import()

Webpack does code splitting automatically without doing any configuration

6. Combine urL-loader to package small images and convert them into base strings to reduce HTTP requests

7. The CSS loader is resolved from the back to the front