The origin of the module packaging tool

*. Problems with modularity

1.ES Modules Has an environment compatibility problem

2. Too many module files and frequent network requests

3. All front-end resources need to be modular, not just JavaScript modules (HTML, CSS modules)

Bundled together to solve the problem of frequent browser requests for module files

The development phase is written through modularization, and the production phase is packaged through packaging tools

The front-end module packaging tool meets the following requirements:

1. New feature code compilation

2. Modular JavaScript packaging

3. Support different types of resource files

Module packaging tool profile

Webpack acts as a module packaging tool

1. It can solve the problem of modular JavaScript packaging, packaging scattered module code into the same JS file;

2. For those codes with environmental compatibility problems, you can compile and transform them through module Loader during the packaging process;

3. Webpack has the ability to split the code, packaging all the code in the application according to our needs, without worrying about the problem of large files packed together; In the application loading process, the modules necessary for the first run are packed together, and other modules are stored separately. When the actual need is met, the module is loaded asynchronously to realize incremental loading or progressive loading, so as to avoid the problem of file fragmentation or file too big

4. Webpack supports modular loading of any type of resource file

Note: Packaging tools address front-end modularity as a whole, not just JavaScript modularity

Webpack is quick to get started

Yarn init --yes // Initialize package.json webpack for NPM tool module YARN add webpack webpack-cli --dev yarn webpack // Or use YARN build in scripts that write package.jsonCopy the code

How the core of Webpack works

1. Webpack will find the entry file according to the configuration of the project in many files, generally this file is a javascript file;

2. Through import, require parses and deduces the resource modules needed by this module, respectively parses the dependencies corresponding to each resource module, and finally forms the dependency tree of the file, and finds the resource files corresponding to each node through the recursive dependency tree;

3. Locate the loader corresponding to the module according to the Routes attribute in the configuration file and hand it to the corresponding loader to load the module.

4. Finally, put the loading result into bundle.js to realize the packaging of the whole project

5. The Loader mechanism is the core of WebPack

Webpack develops a Loader

Working principles of Loader

Implement a Markdown loader that can import markdown files directly into the code

The Markdown file is converted to HTML and displayed on the page. The loader results in the converted HTML string

Code address: github.com/JinYoMo/md-…

How the Webpack Plugin mechanism works – Develop a Plugin Plugin

Plugins have a wider range of capabilities than Loaders

Plugin is implemented through the hook mechanism

Webpack requires that the plug-in be either a function or an object that contains the Apply method

A plug-in is defined as a type, and an apply method is defined within the type, which is then used by building an instance of the type

How it works: Plug-ins implement extensions by mounting functions in hooks in the WebPack lifecycle

The process of developing a WebPack plug-in that removes comments

Original effect:

Implementation method:

Code address: github.com/JinYoMo/com…

The completion of