This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

At present, the front-end development work is basically unable to get rid of Webpack. Although I use it every day, I feel that I do not have a very deep understanding of Webpack, so I come to a systematic summary.

What problem does your understanding of Webpack solve?

Webpack is a static module packaging tool for modern JavaScript applications.

The static module

Static modules refer to resources that can be directly referenced by Webpack during development (resources that can be directly retrieved and packaged into bundle.js).

When WebPack processes an application, it internally builds a dependency graph that maps to every module (no longer just JS files) required for the project and generates one or more bundles

Webpack capabilities and problems solved

  • Compile code ability

    In the development process, we often use some advanced features to speed up our development efficiency or security, such as ES6+TypeScript scripting logic, sASS, LESS and other ways to write CSS style code. Webpack can solve browser compatibility problems by compiling the code of different features into ES5 syntax or CSS files that can be recognized by the browser

    Compress code to optimize site performance

  • Module integration capability

    Improved performance, maintainability, and resolution of frequent browser requests for files

  • The ability to modularize everything

    Enhanced project maintenance, support for different types of front-end module types, unified modular scheme, all resource file loading can be controlled by code

The webPack build process

Run the process

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

  1. The first will be from the configuration file andShellStatement reads and merges parameters, initializes the plug-ins you need to use, and configures the parameters required by the execution environment, such as plug-ins.
  2. Called after initialization is completeCompliertherunTo really startwebpackCompile the build process,webpackThe build process includescompile,make,build,seal,emitPhases, which complete the build process.

Initialize the

Entry – options start

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

The run is instantiated

Compiler: 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

Compile build

Entry confirmation entry

Locate all entry files according to the entry in the configuration

Make build module

Starting from the import file, call all configured Loader to translate the module, find the module that the module depends on, and then recurse this step until all the import dependent files are processed in this step

Build Module Completes module compilation

After using Loader to translate all modules in the above step, the final content of each module after translation and the dependencies between them are obtained

Seal Output resources

According to the dependency relationship between the entry and modules, the Chunk is assembled one by one containing multiple modules, and then each Chunk is converted into a separate file and added to the output list. This step is the last chance to modify the output content

Emit 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

The Demo webpack. Config. Js configuration

var path = require('path'); var node_modules = path.resolve(__dirname, 'node_modules'); var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js'); Module.exports = {// import file, which is the starting point of module construction, and each import file corresponds to the last chunk generated. entry: { bundle: [ 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve(__dirname, 'app/app.js')]}, // file path pointing (to speed up the packaging process). Resolve: {alias: {'react': pathToReact}}, // generate file, is the end of the module construction, including the output file and output path. output: { path: path.resolve(__dirname, 'build'), filename: '[name].js'}, // Loader is configured to process various modules, including CSS preprocessor Loader, ES6 compiler Loader, and Image processor Loader. module: { loaders: [ { test: /.js$/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ], noParse: [pathToReact]}, // Webpack each plugin object, in the Webpack event flow to execute the corresponding method. plugins: [ new webpack.HotModuleReplacementPlugin() ] };Copy the code

In addition, I will briefly introduce some core concepts of Webpack:

  • loader

    Can convert various resources, and processing into the corresponding module loader.

    Loaders can be used in serial mode.

  • chunk

    The result of code Splitting, which is a splinter loaded on demand, loads different modules.

For the relationship between Module and chunk, please refer to the official webpack picture:

  • plugin

    The webPack plugin entity, UglifyJsPlugin as an example

    function UglifyJsPlugin(options) { this.options = options; } module.exports = UglifyJsPlugin; UglifyJsPlugin.prototype.apply = function(compiler) { compiler.plugin("compilation", function(compilation) { compilation.plugin("build-module", function(module) { }); Compile. plugin("optimize-chunk-assets", function(chunks, callback) {// Uglify logic}); compilation.plugin("normal-module-loader", function(context) { }); }); };Copy the code

    You’ll often see compilation.plugin(‘ XXX ‘,callback) in Webpack, which you can think of as a bind to events that are triggered by Webpack at packaging time.