WebpackClass bundle is a self-executing function that takes an object, key: Module path, value: Function function wrap, Internal use eval contains the main contents of a module. Webpack (options) /* (1) Read the configuration entry 1 to obtain the path of the entry module 2 to obtain the dependency of the entry module Webpackbootstrap function generate file location file read configuration exit generate file location file name */ execute function, Const options = require("./webpack.config.js"); Const webpack = require("./lib/webpack1.js"); // webpack new webpack(options).run(); // new webpack(options); const fs = require('fs'); const path = require('path'); Const parser = require("@babel/parser"); const traverse = require("@babel/traverse").default; const { transformFromAst } = require("@babel/core"); module.exports = class webpack { constructor(options) { const { entry, output} = options; this.entry= entry; // Save this.output = output // save this.modules = []; } run () {// Start from the entry const info = this.parse(this.entry); this.modules.push(info); // Get all module information and store this. Modules as an array for (let I = 0; i < this.modules.length; i += 1) { const item = this.modules[i]; const { yilai} = item; If (yilai) {for (let I in yilai) {// Add this.modules. Push (this.parse(yilai[I])); } } } // console.log(this.modules); const obj = {}; This.modules. ForEach ((item) => {obj[item.entryfile] = {yilai: item.yilai, code: item.code, } }); // console.log(obj); This.file (obj); } parse(entryFile) { // console.log(entryFile); const content = fs.readFileSync(entryFile, 'utf-8'); // Ast tree formation const dirname = path.dirname(entryFile); const ast = parser.parse(content, { sourceType: "module", }); // console.log(ast); // console.log(ast.program.body) const yilai = {}; Traverse (ast, {// filter qualified import statements, Import ImportDeclaration({node}) {// Obtain the path of the current import file const pathValue = node.source.value const newPathName= './'  + path.join(dirname , pathValue); // Depend on path relative to entry: depend on path relative to SRC yilai[pathValue] = newPathName; // console.log(yilai); // Get the dependent location // initial AST tree}}); Const {code} = transformFromAst(ast, null, {// Null presets: ["@babel/preset-env"],}); // CSS, TSX to loader for processing // console.log(code); return { code, yilai, entryFile } } file(code) { // console.log(code); Const filePath = path.join(this.output.path, this.output.filename); // console.log(filePath); const newCode = JSON.stringify(code); // The object is converted to json console.log(newCode); // Wrap a layer, Const bundle = '(function(modules){// webpackbootSrap parameter function require(module) {// file entry // relative path // relativePath : / SRC /a.js ->./ / override the actual call to the require function, nested, Function pathRequire(relativePath) {// Obtain the actual path, Return require(modules[module]. Yilai [relativePath]) // const exports = {}; // (function(require,exports, code) {eval(code); // function(require,exports, code) {eval(code); For pathRequire}) (pathRequire, exports, modules [the module] code); return exports; } // require('${this.entry}'); // file entry})(${newCode}) '; Fs. writeFileSync(filePath, bundle, 'utF-8 '); } // Ast abstract syntax tree // tree structure, a node, is an object information // @babel/parser receives content, Form an AST tree // @babel/traverse nodes // @babel/core handle JS // @babel/preset-env handle JS // What if modules are interdependent? } /* Obtain configuration item information in webpack.config.js; obtain entry configuration and exit configuration information; obtain dependency information and execution content of entry file; 4 process the execution content of entry file; 5 traverse the dependency content of entry file to obtain its dependency; 7 Build the dependency graph of the entire tree. 8 Start from the entry file, execute the webpack_require function, start from the entry address. */ Webpack packing principle analysis 1 Receive Webpack configuration and read 2 entry: 4. The information of these dependent modules, namely the path information 5. The content should be processed into the content that can be correctly parsed by the tourist. Generates the contents of the bundle file, the initiator function 9 exits, and generates the name and location of the resource fileCopy the code