分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

.16-浅析webpack源码之打包无关流程梳理

发布时间:2023-09-06 01:32责任编辑:蔡小小关键词:webpack

  之前忽略了一个点,如下:

if (options.plugins && Array.isArray(options.plugins)) { ???compiler.apply.apply(compiler, options.plugins);}

  在compiler对象的fs模块挂载完后,会对传入的插件进行加载,这个过程在内置插件加载之前。

  插件部分单独讲解,所以这个地方先暂时略过。

  内置插件全部plugin完毕后,会检测编译的回调函数:

if (callback) { ???if (typeof callback !== "function") throw new Error("Invalid argument: callback"); ???// 检测是否有watch选项 ???if (options.watch === true || (Array.isArray(options) && options.some(o => o.watch))) { ???????const watchOptions = Array.isArray(options) ? options.map(o => o.watchOptions || {}) : (options.watchOptions || {}); ???????return compiler.watch(watchOptions, callback); ???} ???compiler.run(callback);}

  vue-cli的脚手架生产模式的构建文件build.js中就很明显的传了一个回调函数:

webpack(webpackConfig, (err, stats) => { /**/ })

  这里的回调函数主要是输出一些打包信息,包括打包文件的状态、打包错误提示、打包完成提示等等。

  暂时不管这个回调,因此会直接返回compiler,回到预编译的webpack.js文件中。

  又回到了久违的bin/webpack.js,后面的流程简化后源码如下:

try { ???compiler = webpack(options);} catch (err) { /**/ }// --progress用于输出打包信息if (argv.progress) { ???var ProgressPlugin = require("../lib/ProgressPlugin"); ???compiler.apply(new ProgressPlugin({ ???????profile: argv.profile ???}));}// 输出打包信息的回调函数function compilerCallback(err, stats) { /**/ }// 如果有watch则打包后进程持续进行监视if (firstOptions.watch || options.watch) { /**/ }// 直接编译else ???compiler.run(compilerCallback);

  在返回compiler对象后,此时还未进行打包操作,只是准备好了一切,剩余的几步如下:

1、检测--progress指令,该指令用于将进度输出到控制台

2、检测--watch指令或者配置文件中的watch参数,如果有,则打包完后持续检测相关文件,发生变动立即调用打包操作

3、没有配置watch则直接进行打包操作,打包完成后调用回调函数

  

  progress这个可以自己去尝试,可以想象成安装程序那个界面。

  watch指令作用如图:

  打包完进程并不会退出,当修改入口文件并保存后,会立即打包并刷新提示输出信息。

  这里先暂时不管watch。

  最后一步就是打包的操作:

compiler.run(compilerCallback);

  传入的回调函数只是负责输出打包信息,源码如下:

function compilerCallback(err, stats) { ???// 非watch模式下清理缓存 ???if (!options.watch || err) { ???????compiler.purgeInputFileSystem(); ???} ???// 错误处理 ???if (err) { /**/ } ???// 输出打包信息 ???if (outputOptions.json) { ???????process.stdout.write(JSON.stringify(stats.toJson(outputOptions), null, 2) + "\n"); ???} else if (stats.hash !== lastHash) { ???????lastHash = stats.hash; ???????var statsString = stats.toString(outputOptions); ???????if (statsString) ???????????process.stdout.write(statsString + "\n"); ???} ???if (!options.watch && stats.hasErrors()) { ???????process.exitCode = 2; ???}}

  stats是打包后生成的信息,将其格式化后通过prcess,stdout.write输出,这个输出方式底层就是console.log,上面那个图中打包完成信息就是通过这行代码输出的。

  

  至此,所以与打包过程无关的操作都已经完事,剩下的内容都集中在compiler.run这个调用中。

.16-浅析webpack源码之打包无关流程梳理

原文地址:http://www.cnblogs.com/QH-Jimmy/p/8089509.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved