webpack打包原理

ops/2024/9/20 2:07:13/ 标签: webpack, 前端, node.js

目录

    • 1、搭建结构,读取配置参数
    • 2、配置参数对象初始化 Compiler(new Compiler(webpackOptions))
    • 3、挂载配置文件中的插件,
    • 4、执行Compiler 中的 run 方法进行编译
    • 5、根据配置文件中的entry 配置项找到所有的入口
    • 6、从入口文件出发,调用配置的loader规则,对模块进行编译
      • 6.1、入口文件的绝对路径添加到依赖数组(this.fileDependencies)中,记录此次编译依赖的模块
      • 6.2、 得到入口模块的module 对象(里面放着模块的路径、依赖模块、源代码)
        • 6.2.1、 读取模块内容,获取源代码
        • 6.2.2、创建模块对象
        • 6.2.3、找到对应的 Loader 对源代码进行翻译和替换(主要是 loaders.reduceRight())
      • 6.3、将生成的入口文件 module 对象 push 进 this.modules 中
    • 7、找出此模块所依赖的模块,再对依赖模块进行编译
      • 7.1、先把源代码编译成 AST
      • 7.2、在 AST 中查找 require 语句,找出依赖的模块名称和绝对路径
      • 7.3、将依赖模块的绝对路径 push 到 this.fileDependencies 中
      • 7.4、生成依赖模块的模块 id
      • 7.5、修改语法结构,把依赖的模块改为依赖模块 id
      • 7.6、将依赖模块的信息 push 到该模块的 dependencies 属性中
      • 7.7、生成新代码(generator),并把转译后的源代码放到 module._source 属性上
      • 7.8、对依赖模块进行编译(对 module 对象中的 dependencies 进行递归执行 buildModule )
      • 7.9、对依赖模块编译完成后得到依赖模块的 module 对象,push 到 this.modules 中
      • 7.10、等依赖模块全部编译完成后,返回入口模块的 module 对象
    • 8、等所有模块都编译完成后,根据模块之间的依赖关系,组装代码块 chunk
    • 9、把各个代码块 chunk 转换成一个一个文件加入到输出列表
    • 10、确定好输出内容之后,根据配置的输出路径和文件名,将文件内容写入到文件系统
    • 11、实现 watch 模式
  • 用到的技术总结

complier 类,依赖于Tapable (专注于自定义时间的触发和处理,通过Tapable可以自定义时间,在适当的时机去执行)

webpack中的生命周期就是通过 Tapable 在 compiler 和 compilation上进行挂载。

简单事件流:
1、打包前的准备工作
2、打包中的过程中处理(编译阶段)compilation 处理
2.1、文件最终编译
2.2、文件变化重新编译
3、打包结束后(成功/失败)

详细事件流程:
webpack 本质是一个函数,接受配置信息作为参数,返回compiler对象,调用 compiler 对象中的run 函数启动编译,run函数接受一个回调,可以用来查看编译过程中的错误信息或者编译信息

本文webpack版本:5.93.0

1、搭建结构,读取配置参数

debugger.js 中

const webpack = require("./webpack"); //手写webpack
这里一般会放配置信息
const compiler = webpack(webpackOptions);compiler.run((err, stats) => {console.log(err);console.log(stats.toJson({assets: true, //打印本次编译产出的资源chunks: true, //打印本次编译产出的代码块modules: true, //打印本次编译产出的模块}));
});

搭建结构,创建一个Compiler 类

class Compiler {constructor() {}run(callback) {}
}//第一步:搭建结构,读取配置参数,这里接受的是webpack.config.js中的参数
function webpack(webpackOptions) {const compiler = new Compiler()return compiler;
}

webpackOptions_53">2、配置参数对象初始化 Compiler(new Compiler(webpackOptions))

Compiler 放着你需要的各种 编译信息 和 生命周期Hook,单例模式(保证一个类只有一个实例,并提供一个访问他的全局节点)

//Compiler其实是一个类,它是整个编译过程的大管家,而且是单例模式
class Compiler {
+ constructor(webpackOptions) {
+   this.options = webpackOptions; //存储配置信息
+   //它内部提供了很多钩子
+   this.hooks = {
+     run: new SyncHook(), //会在编译刚开始的时候触发此run钩子
+     done: new SyncHook(), //会在编译结束的时候触发此done钩子
+   };
+ }
}//第一步:搭建结构,读取配置参数,这里接受的是webpack.config.js中的参数
function webpack(webpackOptions) {//第二步:用配置参数对象初始化 `Compiler` 对象
+ const compiler = new Compiler(webpackOptions)return compiler;
}

3、挂载配置文件中的插件,

webpack 内部进行插件的挂载会执行 apply 函数,可以在 apply 订阅各种生命周期方法。

//自定义插件WebpackRunPlugin
class WebpackRunPlugin {apply(compiler) {compiler.hooks.run.tap("WebpackRunPlugin", () => {console.log("开始编译");});}
}//自定义插件WebpackDonePlugin
class WebpackDonePlugin {apply(compiler) {compiler.hooks.done.tap("WebpackDonePlugin", () => {console.log("结束编译");});}
}

webpack.config.js 中使用

const { WebpackRunPlugin, WebpackDonePlugin } = require("./webpack");
module.exports = {//其他省略
plugins: [new WebpackRunPlugin(), new WebpackDonePlugin()],
};

插件定义必须有一个apply方法,加载插件就是执行的apply

//第一步:搭建结构,读取配置参数,这里接受的是webpack.config.js中的参数
function webpack(webpackOptions) {//第二步:用配置参数对象初始化 `Compiler` 对象const compiler = new Compiler(webpackOptions);//第三步:挂载配置文件中的插件
+ const { plugins } = webpackOptions;
+ for (let plugin of plugins) {
+   plugin.apply(compiler);
+ }return compiler;
}

4、执行Compiler 中的 run 方法进行编译

调用Compiler 中的 run 方法开启编译,调用Compiler 中的 done 方法,编译完成。
.call()明确地设置函数执行时的上下文(即this的值)

//Compiler其实是一个类,它是整个编译过程的大管家,而且是单例模式
class Compiler {constructor(webpackOptions) {//省略}+ compile(callback){
+  //
+ }+ //第四步:执行`Compiler`对象的`run`方法开始执行编译
+ run(callback) {
+   this.hooks.run.call(); //在编译前触发run钩子执行,表示开始启动编译了
+   const onCompiled = () => {
+     this.hooks.done.call(); //当编译成功后会触发done这个钩子执行
+   };
+   this.compile(onCompiled); //开始编译,成功之后调用onCompiled}
}

解耦编译阶段,通过Compilation 来完成。

class Compiler {//省略其他run(callback) {//省略}compile(callback) {//虽然webpack只有一个Compiler,但是每次编译都会产出一个新的Compilation,//这里主要是为了考虑到watch模式,它会在启动时先编译一次,然后监听文件变化,如果发生变化会重新开始编译//每次编译都会产出一个新的Compilation,代表每次的编译结果
+   let compilation = new Compilation(this.options);
+   compilation.build(callback); //执行compilation的build方法进行编译,编译成功之后执行回调}
}+ class Compilation {
+   constructor(webpackOptions) {
+     this.options = webpackOptions;
+     this.modules = []; //本次编译所有生成出来的模块
+     this.chunks = []; //本次编译产出的所有代码块,入口模块和依赖的模块打包在一起为代码块
+     this.assets = {}; //本次编译产出的资源文件
+     this.fileDependencies = []; //本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译
+   }+   build(callback) {
+    //这里开始做编译工作,编译成功执行callback
+    callback()
+   }
+ }

5、根据配置文件中的entry 配置项找到所有的入口

class Compilation {constructor(webpackOptions) {this.options = webpackOptions;this.modules = []; //本次编译所有生成出来的模块this.chunks = []; //本次编译产出的所有代码块,入口模块和依赖的模块打包在一起为代码块this.assets = {}; //本次编译产出的资源文件this.fileDependencies = []; //本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译}build(callback) {//第五步:根据配置文件中的`entry`配置项找到所有的入口
+   let entry = {};
+   if (typeof this.options.entry === "string") {
+     entry.main = this.options.entry; //如果是单入口,将entry:"xx"变成{main:"xx"},这里需要做兼容
+   } else {
+     entry = this.options.entry;
+   }//编译成功执行callbackcallback()}
}

6、从入口文件出发,调用配置的loader规则,对模块进行编译

比如 webpack.js 中,写两个自定义的loader

const loader1 = (source) => {return source + "//给你的代码加点注释:loader1";
};const loader2 = (source) => {return source + "//给你的代码加点注释:loader2";
};

webpack.congfig.js 中引用

const { loader1, loader2 } = require("./webpack");
module.exports = {//省略其他module: {rules: [{test: /\.js$/,use: [loader1, loader2],},],},
};

6.1、入口文件的绝对路径添加到依赖数组(this.fileDependencies)中,记录此次编译依赖的模块

this.fileDependencies 主要放本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译。

//将\替换成/
function toUnixPath(filePath) {return filePath.replace(/\\/g, "/");
}const baseDir = toUnixPath(process.cwd()); //获取工作目录,在哪里执行命令就获取哪里的目录,这里获取的也是跟操作系统有关系,要替换成/class Compilation {constructor(webpackOptions) {this.options = webpackOptions;this.modules = []; //本次编译所有生成出来的模块this.chunks = []; //本次编译产出的所有代码块,入口模块和依赖的模块打包在一起为代码块this.assets = {}; //本次编译产出的资源文件this.fileDependencies = []; //本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译}build(callback) {//第五步:根据配置文件中的`entry`配置项找到所有的入口let entry = {};if (typeof this.options.entry === "string") {entry.main = this.options.entry; //如果是单入口,将entry:"xx"变成{main:"xx"},这里需要做兼容} else {entry = this.options.entry;}
+   //第六步:从入口文件出发,调用配置的 `loader` 规则,对各模块进行编译
+   for (let entryName in entry) {
+     //entryName="main" entryName就是entry的属性名,也将会成为代码块的名称
+     let entryFilePath = path.posix.join(baseDir, entry[entryName]); //path.posix为了解决不同操作系统的路径分隔符,这里拿到的就是入口文件的绝对路径
+     //6.1 把入口文件的绝对路径添加到依赖数组(`this.fileDependencies`)中,记录此次编译依赖的模块
+     this.fileDependencies.push(entryFilePath);
+   }//编译成功执行callbackcallback()}
}

6.2、 得到入口模块的module 对象(里面放着模块的路径、依赖模块、源代码)

6.2.1、 读取模块内容,获取源代码
class Compilation {constructor(webpackOptions) {this.options = webpackOptions;this.modules = []; //本次编译所有生成出来的模块this.chunks = []; //本次编译产出的所有代码块,入口模块和依赖的模块打包在一起为代码块this.assets = {}; //本次编译产出的资源文件this.fileDependencies = []; //本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译}+ //当编译模块的时候,name:这个模块是属于哪个代码块chunk的,modulePath:模块绝对路径
+ buildModule(name, modulePath) {
+   //6.2.1 读取模块内容,获取源代码
+   let sourceCode = fs.readFileSync(modulePath, "utf8");
+
+   return {};
+ }build(callback) {//第五步:根据配置文件中的`entry`配置项找到所有的入口//代码省略...//第六步:从入口文件出发,调用配置的 `loader` 规则,对各模块进行编译for (let entryName in entry) {//entryName="main" entryName就是entry的属性名,也将会成为代码块的名称let entryFilePath = path.posix.join(baseDir, entry[entryName]); //path.posix为了解决不同操作系统的路径分隔符,这里拿到的就是入口文件的绝对路径//6.1 把入口文件的绝对路径添加到依赖数组(`this.fileDependencies`)中,记录此次编译依赖的模块this.fileDependencies.push(entryFilePath);//6.2 得到入口模块的的 `module` 对象 (里面放着该模块的路径、依赖模块、源代码等)
+     let entryModule = this.buildModule(entryName, entryFilePath);}//编译成功执行callbackcallback()}
}
6.2.2、创建模块对象
class Compilation {//省略其他//当编译模块的时候,name:这个模块是属于哪个代码块chunk的,modulePath:模块绝对路径buildModule(name, modulePath) {//6.2.1 读取模块内容,获取源代码let sourceCode = fs.readFileSync(modulePath, "utf8");//buildModule最终会返回一个modules模块对象,每个模块都会有一个id,id是相对于根目录的相对路径
+   let moduleId = "./" + path.posix.relative(baseDir, modulePath); //模块id:从根目录出发,找到与该模块的相对路径(./src/index.js)
+   //6.2.2 创建模块对象
+   let module = {
+     id: moduleId,
+     names: [name], //names设计成数组是因为代表的是此模块属于哪个代码块,可能属于多个代码块
+     dependencies: [], //它依赖的模块
+     _source: "", //该模块的代码信息
+   };
+   return module;}build(callback) {//省略}
}
6.2.3、找到对应的 Loader 对源代码进行翻译和替换(主要是 loaders.reduceRight())
class Compilation {//省略其他//当编译模块的时候,name:这个模块是属于哪个代码块chunk的,modulePath:模块绝对路径buildModule(name, modulePath) {//6.2.1 读取模块内容,获取源代码let sourceCode = fs.readFileSync(modulePath, "utf8");//buildModule最终会返回一个modules模块对象,每个模块都会有一个id,id是相对于根目录的相对路径let moduleId = "./" + path.posix.relative(baseDir, modulePath); //模块id:从根目录出发,找到与该模块的相对路径(./src/index.js)//6.2.2 创建模块对象let module = {id: moduleId,names: [name], //names设计成数组是因为代表的是此模块属于哪个代码块,可能属于多个代码块dependencies: [], //它依赖的模块_source: "", //该模块的代码信息};//6.2.3 找到对应的 `Loader` 对源代码进行翻译和替换
+   let loaders = [];
+   let { rules = [] } = this.options.module;
+   rules.forEach((rule) => {
+     let { test } = rule;
+     //如果模块的路径和正则匹配,就把此规则对应的loader添加到loader数组中
+     if (modulePath.match(test)) {
+       loaders.push(...rule.use);
+     }
+   });+   //自右向左对模块进行转译
+   sourceCode = loaders.reduceRight((code, loader) => {
+     return loader(code);
+   }, sourceCode);return module;}build(callback) {//省略}
}

6.3、将生成的入口文件 module 对象 push 进 this.modules 中

class Compilation {constructor(webpackOptions) {this.options = webpackOptions;this.modules = []; //本次编译所有生成出来的模块this.chunks = []; //本次编译产出的所有代码块,入口模块和依赖的模块打包在一起为代码块this.assets = {}; //本次编译产出的资源文件this.fileDependencies = []; //本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译}buildModule(name, modulePath) {//省略其他}build(callback) {//第五步:根据配置文件中的`entry`配置项找到所有的入口//省略其他//第六步:从入口文件出发,调用配置的 `loader` 规则,对各模块进行编译for (let entryName in entry) {//entryName="main" entryName就是entry的属性名,也将会成为代码块的名称let entryFilePath = path.posix.join(baseDir, entry[entryName]); //path.posix为了解决不同操作系统的路径分隔符,这里拿到的就是入口文件的绝对路径//6.1 把入口文件的绝对路径添加到依赖数组(`this.fileDependencies`)中,记录此次编译依赖的模块this.fileDependencies.push(entryFilePath);//6.2 得到入口模块的的 `module` 对象 (里面放着该模块的路径、依赖模块、源代码等)let entryModule = this.buildModule(entryName, entryFilePath);
+     //6.3 将生成的入口文件 `module` 对象 push 进 `this.modules` 中
+     this.modules.push(entryModule);}//编译成功执行callbackcallback()}
}

7、找出此模块所依赖的模块,再对依赖模块进行编译

7.1、先把源代码编译成 AST

 let ast = parser.parse(sourceCode, { sourceType: "module" });

7.2、在 AST 中查找 require 语句,找出依赖的模块名称和绝对路径

 if (node.callee.name === "require") {
+           let depModuleName = node.arguments[0].value; //获取依赖的模块
+           let dirname = path.posix.dirname(modulePath); //获取当前正在编译的模所在的目录
+           let depModulePath = path.posix.join(dirname, depModuleName); //获取依赖模块的绝对路径
+           let extensions = this.options.resolve?.extensions || [ ".js" ]; //获取配置中的extensions
+           depModulePath = tryExtensions(depModulePath, extensions); //尝试添加后缀,找到一个真实在硬盘上存在的文件}

7.3、将依赖模块的绝对路径 push 到 this.fileDependencies 中

 this.fileDependencies.push(depModulePath);

7.4、生成依赖模块的模块 id

 let depModuleId = "./" + path.posix.relative(baseDir, depModulePath);

7.5、修改语法结构,把依赖的模块改为依赖模块 id

node.arguments = [types.stringLiteral(depModuleId)];

7.6、将依赖模块的信息 push 到该模块的 dependencies 属性中

module.dependencies.push({ depModuleId, depModulePath });

7.7、生成新代码(generator),并把转译后的源代码放到 module._source 属性上

let { code } = generator(ast);
+     module._source = code;

7.8、对依赖模块进行编译(对 module 对象中的 dependencies 进行递归执行 buildModule )

module.dependencies.forEach(({ depModuleId, depModulePath }) => {
+       //考虑到多入口打包 :一个模块被多个其他模块引用,不需要重复打包
+       let existModule = this.modules.find((item) => item.id === depModuleId);
+       //如果modules里已经存在这个将要编译的依赖模块了,那么就不需要编译了,直接把此代码块的名称添加到对应模块的names字段里就可以
+       if (existModule) {
+         //names指的是它属于哪个代码块chunk
+         existModule.names.push(name);
+       } else {
+         //7.9:对依赖模块编译完成后得到依赖模块的 `module 对象`,push 到 `this.modules` 中
+         let depModule = this.buildModule(name, depModulePath);
+         this.modules.push(depModule);
+       }
+     });

7.9、对依赖模块编译完成后得到依赖模块的 module 对象,push 到 this.modules 中

 let depModule = this.buildModule(name, depModulePath);
+         this.modules.push(depModule);

7.10、等依赖模块全部编译完成后,返回入口模块的 module 对象

 return module;

8、等所有模块都编译完成后,根据模块之间的依赖关系,组装代码块 chunk

class Compilation {constructor(webpackOptions) {this.options = webpackOptions;this.modules = []; //本次编译所有生成出来的模块this.chunks = []; //本次编译产出的所有代码块,入口模块和依赖的模块打包在一起为代码块this.assets = {}; //本次编译产出的资源文件this.fileDependencies = []; //本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译}buildModule(name, modulePath) {//省略其他}build(callback) {//第五步:根据配置文件中的`entry`配置项找到所有的入口//省略其他//第六步:从入口文件出发,调用配置的 `loader` 规则,对各模块进行编译for (let entryName in entry) {//entryName="main" entryName就是entry的属性名,也将会成为代码块的名称let entryFilePath = path.posix.join(baseDir, entry[entryName]); //path.posix为了解决不同操作系统的路径分隔符,这里拿到的就是入口文件的绝对路径//6.1 把入口文件的绝对路径添加到依赖数组(`this.fileDependencies`)中,记录此次编译依赖的模块this.fileDependencies.push(entryFilePath);//6.2 得到入口模块的的 `module` 对象 (里面放着该模块的路径、依赖模块、源代码等)let entryModule = this.buildModule(entryName, entryFilePath);//6.3 将生成的入口文件 `module` 对象 push 进 `this.modules` 中this.modules.push(entryModule);//第八步:等所有模块都编译完成后,根据模块之间的依赖关系,组装代码块 `chunk`(一般来说,每个入口文件会对应一个代码块`chunk`,每个代码块`chunk`里面会放着本入口模块和它依赖的模块)
+     let chunk = {
+       name: entryName, //entryName="main" 代码块的名称
+       entryModule, //此代码块对应的module的对象,这里就是src/index.js 的module对象
+       modules: this.modules.filter((item) => item.names.includes(entryName)), //找出属于该代码块的模块
+     };
+     this.chunks.push(chunk);}//编译成功执行callbackcallback()}
}

9、把各个代码块 chunk 转换成一个一个文件加入到输出列表

//生成运行时代码
+ function getSource(chunk) {
+   return `
+    (() => {
+     var modules = {
+       ${chunk.modules.map(
+         (module) => `
+         "${module.id}": (module) => {
+           ${module._source}
+         }
+       `
+       )}  
+     };
+     var cache = {};
+     function require(moduleId) {
+       var cachedModule = cache[moduleId];
+       if (cachedModule !== undefined) {
+         return cachedModule.exports;
+       }
+       var module = (cache[moduleId] = {
+         exports: {},
+       });
+       modules[moduleId](module, module.exports, require);
+       return module.exports;
+     }
+     var exports ={};
+     ${chunk.entryModule._source}
+   })();
+    `;
+ }class Compilation {constructor(webpackOptions) {this.options = webpackOptions;this.modules = []; //本次编译所有生成出来的模块this.chunks = []; //本次编译产出的所有代码块,入口模块和依赖的模块打包在一起为代码块this.assets = {}; //本次编译产出的资源文件this.fileDependencies = []; //本次打包涉及到的文件,这里主要是为了实现watch模式下监听文件的变化,文件发生变化后会重新编译}//当编译模块的时候,name:这个模块是属于哪个代码块chunk的,modulePath:模块绝对路径buildModule(name, modulePath) {//省略}build(callback) {//第五步:根据配置文件中的`entry`配置项找到所有的入口//第六步:从入口文件出发,调用配置的 `loader` 规则,对各模块进行编译for (let entryName in entry) {//省略//6.1 把入口文件的绝对路径添加到依赖数组(`this.fileDependencies`)中,记录此次编译依赖的模块//6.2 得到入口模块的的 `module` 对象 (里面放着该模块的路径、依赖模块、源代码等)//6.3 将生成的入口文件 `module` 对象 push 进 `this.modules` 中//第八步:等所有模块都编译完成后,根据模块之间的依赖关系,组装代码块 `chunk`(一般来说,每个入口文件会对应一个代码块`chunk`,每个代码块`chunk`里面会放着本入口模块和它依赖的模块)}//第九步:把各个代码块 `chunk` 转换成一个一个文件加入到输出列表
+    this.chunks.forEach((chunk) => {
+      let filename = this.options.output.filename.replace("[name]", chunk.name);
+      this.assets[filename] = getSource(chunk);
+    });+     callback(
+       null,
+       {
+         chunks: this.chunks,
+         modules: this.modules,
+         assets: this.assets,
+       },
+       this.fileDependencies
+     );}
}

10、确定好输出内容之后,根据配置的输出路径和文件名,将文件内容写入到文件系统

class Compiler {constructor(webpackOptions) {this.options = webpackOptions; //存储配置信息//它内部提供了很多钩子this.hooks = {run: new SyncHook(), //会在编译刚开始的时候触发此run钩子done: new SyncHook(), //会在编译结束的时候触发此done钩子};}compile(callback) {//省略}//第四步:执行`Compiler`对象的`run`方法开始执行编译run(callback) {this.hooks.run.call(); //在编译前触发run钩子执行,表示开始启动编译了const onCompiled = (err, stats, fileDependencies) => {
+     //第十步:确定好输出内容之后,根据配置的输出路径和文件名,将文件内容写入到文件系统(这里就是硬盘)
+     for (let filename in stats.assets) {
+       let filePath = path.join(this.options.output.path, filename);
+       fs.writeFileSync(filePath, stats.assets[filename], "utf8");
+     }+     callback(err, {
+       toJson: () => stats,
+     });this.hooks.done.call(); //当编译成功后会触发done这个钩子执行};this.compile(onCompiled); //开始编译,成功之后调用onCompiled}
}

11、实现 watch 模式

class Compiler {constructor(webpackOptions) {//省略}compile(callback) {//虽然webpack只有一个Compiler,但是每次编译都会产出一个新的Compilation,//这里主要是为了考虑到watch模式,它会在启动时先编译一次,然后监听文件变化,如果发生变化会重新开始编译//每次编译都会产出一个新的Compilation,代表每次的编译结果let compilation = new Compilation(this.options);compilation.build(callback); //执行compilation的build方法进行编译,编译成功之后执行回调}//第四步:执行`Compiler`对象的`run`方法开始执行编译run(callback) {this.hooks.run.call(); //在编译前触发run钩子执行,表示开始启动编译了const onCompiled = (err, stats, fileDependencies) => {//第十步:确定好输出内容之后,根据配置的输出路径和文件名,将文件内容写入到文件系统(这里就是硬盘)for (let filename in stats.assets) {let filePath = path.join(this.options.output.path, filename);fs.writeFileSync(filePath, stats.assets[filename], "utf8");}callback(err, {toJson: () => stats,});+     fileDependencies.forEach((fileDependencie) => {
+       fs.watch(fileDependencie, () => this.compile(onCompiled));
+     });this.hooks.done.call(); //当编译成功后会触发done这个钩子执行};this.compile(onCompiled); //开始编译,成功之后调用onCompiled}
}

原文:二十张图片彻底讲明白Webpack设计理念,以看懂为目的

用到的技术总结

  • reduceRight
const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduceRight((accumulator, currentValue) => {console.log(currentValue)return accumulator + currentValue;
}, 0); // Initial value is 0console.log(sum); // Output: 15

在这里插入图片描述

  • path.posix.dirname(modulePath)
    获取当前正在编译的模所在的目录。其中 modulePath绝对路径。
  • path.posix.join(dirname, depModuleName)
    获取依赖模块的绝对路径。dirname:模所在的目录。depModuleName:依赖的模块的地址:比如./age

http://www.ppmy.cn/ops/110666.html

相关文章

[网络编程]通过java用TCP实现网络编程

文章目录 一. 通过java用TCP实现网络编程api介绍代码实现上述代码存在的问题 一. 通过java用TCP实现网络编程 api介绍 1. ServerSocket ServerSocket是专门给服务器用的api 构造方法: 方法: 2. Socket 不管是客⼾端还是服务端Socket,都是双⽅建⽴连接以后&#…

基于SpringBoot+Vue+MySQL的美术馆管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着文化艺术产业的蓬勃发展,美术馆作为展示与传播艺术的重要场所,其管理工作变得日益复杂。为了提升美术馆的运营效率、优化参观体验并加强艺术品管理,我们开发了基于SpringBootVueMySQL的美…

LeeCode打卡第二十五天

LeeCode打卡第二十五天 第一题:将有序数组转换成二叉搜索树(LeeCode第108题): 给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵平衡二叉搜索树。 /*** Definition for a binary tree node.* p…

XMind 2024(Mac版本)安装和损坏修复

文章目录 软件下载显示损坏自动激活升级Pro 软件下载 XMind2024 CSD下载地址(无需积分) 显示损坏 点击右侧软件修复,进行修复 需要进入应用手动开启,通过安全验证 输入用户密码 终端输入密码后,自动脚本文件&#xf…

Redisson实现分布式锁

原文链接&#xff0c;对本文进行了总结记录 1.Redisson入门 概念 Redisson 是一个在 Redis 的基础上实现的 Java 驻内存数据网格。通俗来将&#xff0c;就是在 Redis 基础上实现的分布式工具集合。点击访问项目地址。 引入依赖 <!--redisson--> <dependency>&…

C++——内存管理

目录 引言 C/C的内存分布 C语言中动态内存管理方式 C内存管理方式 1.new/delete操作内置类型 2.new与delete操作自定义类型 operator new与operator delete函数 new与delete的实现 1.内置类型 2.自定义类型 定位new表达式 malloc/free和new/delete的区别 结束语 引…

从简单分析到智能问数,Smartbi AIChat让数据回归业务

大数据产业创新服务媒体 ——聚焦数据 改变商业 在某科技公司&#xff0c;资深数据分析师李晨&#xff08;化名&#xff09;正忙于分析新产品的市场表现。面对传统自助式BI工具&#xff0c;李晨在功能界面中手动设置各种查询条件&#xff0c;进行了一番复杂的拖拉拽操作&#…

iPhone 16分辨率,屏幕尺寸,PPI 详细数据对比 iPhone 16 Plus、iPhone 16 Pro、iPhone 16 Pro Max

史上最全iPhone 机型分辨率&#xff0c;屏幕尺寸&#xff0c;PPI详细数据&#xff01;已更新到iPhone 16系列&#xff01; 点击放大查看高清图 &#xff01;

卷积神经网络(一)

目录 一.卷积神经网络的组成 二.卷积层 目的&#xff1a; 参数&#xff1a; 计算公式 卷积运算过程 三.padding-零填充 1.Valid and Same卷积 2.奇数维度的过滤器 四.stride步长 五.多通道卷积 1.多卷积核(多个Filter) 六.卷积总结 七.池化层(Pooling) 八.全连接层…

nginx部署时的路径配置问题

背景 一直觉得程序员敲代码就行了&#xff0c;结果前端一打包部署就给我打回原形了。每回部署都失败&#xff0c;然后我都形成惯性了&#xff0c;一到nginx部署我就摇人&#xff0c;我都不好意思了。 这一次的问题是原前端代码的基础路径为‘/’&#xff0c;现在要改成‘/abc’…

大数据-133 - ClickHouse 基础概述 全面了解

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

ubuntu内核升级后的问题修复

文章目录 需求当前环境禁止内核更新安装内核修复/usr/include/dlocate 测试 需求 升级后的常见问题 驱动程序不兼容: 新内核版本可能导致某些硬件驱动程序不再兼容&#xff0c;尤其是专有驱动程序或第三方驱动程序。启动问题:内核更新可能导致启动问题&#xff0c;例如无法启动…

第四章 类和对象 实践与练习(1)

综合练习 1 简易计算器 使用静态方法模拟一个只能进行两个数加减乘除的简易计算器。 static double a,b;public static void main(String[] args) {简易计算器01 sum new 简易计算器01();//创建一个对象System.out.println("4.4加上7.11的结果&#xff1a;"sum.add…

[数据集][目标检测]车油口挡板开关闭合检测数据集VOC+YOLO格式138张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;138 标注数量(xml文件个数)&#xff1a;138 标注数量(txt文件个数)&#xff1a;138 标注类别…

ModbusTCP/RTU转Ethernet/IP(CIP)-Modbus设备与罗克韦尔AB的PLC之间通讯

IGT-DSER智能网关模块支持西门子、三菱、欧姆龙、罗克韦尔AB等各种品牌的PLC之间通讯&#xff0c;同时也支持PLC与Modbus协议的工业机器人、智能仪表、变频器等设备通讯。网关有多个网口、串口&#xff0c;也可选择WIFI无线通讯。无需PLC内编程开发&#xff0c;只要在IGT-DSER智…

shader 案例学习笔记之将坐标系分成4个象限

代码&#xff1a; _st * 2.0;float index 0.0; index step(1., mod(_st.x,2.0)); index step(1., mod(_st.y,2.0))*2.0; 示意图&#xff1a; 计算左下角 计算右下角 计算左上角 计算右上角 最后结果示意&#xff1a; 坐标系被分成了4个单元格&#xff0c;每个单元格都有…

Kafka高吞吐量的原因

文章目录 生产者&#xff08;写入数据&#xff09;顺序写入Memory Mapped Files 消费者&#xff08;读取数据&#xff09;Kafka是如何巧妙设计的? 总结 众所周知kafka的吞吐量比一般的消息队列要高&#xff0c;号称the fastest&#xff0c;那他是如何做到的&#xff0c;让我们…

产品探秘|开物——面向AI原生和云原生网络研究的首选科研平台

在当今高速发展的信息技术领域&#xff0c;特别是对于那些致力于前沿科技探索与实践的高校而言&#xff0c;拥有一款能够支持复杂网络业务研究与开发的平台至关重要。开物™数据网络开发平台&#xff08;Data Network Development Platform&#xff0c;简称DNDP&#xff09;&am…

[WEBPWN]BaseCTF week1 题解(新手友好教程版)

WEB A Dark Room 这道题的考点是查看网页源代码 网页源代码这里看到的是网页的html css js在用户浏览器上执行的代码 有时候很多铭感信息&#xff0c;或者关键信息。 查看网页源代码的几种方式 1 右键点击查看网页源代码 2 F12 3 Ctrl U 快捷键 HTTP是什么 HTTP&#x…

ip属地河北切换北京

我们知道&#xff0c;每当电脑或手机连接网络时&#xff0c;都会分配到一个网络IP地址&#xff0c;这个IP地址通常与设备所在的地区网络相关联。然而&#xff0c;出于业务或个人需求&#xff0c;有时我们需要将本机的IP地址切换到其他城市。例如要将IP属地河北切换北京&#xf…