资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/浅析webpack源码之Stat.js粗解(十）

浅析webpack源码之Stat.js粗解(十）

Andrman / 3497人阅读

摘要：从出来接着我们看大法，打印一下感觉之前所以的对象都放在了一个合集里，给人而全的感觉里面主要含有一个对象，，输出的，等给每次打包一个值，代表唯一性天啊

从compilation出来
接着我们看

const stats = new Stats(compilation);
Stats.js

log大法，打印一下 stats

let Stats = {
  compilation:{
     _pluginCompat:
      SyncBailHook {
        _args: [Array],
        taps: [Array],
        interceptors: [],
        call: [Function: lazyCompileHook],
        promise: [Function: lazyCompileHook],
        callAsync: [Function: lazyCompileHook],
        _x: undefined },
     hooks:
      { buildModule: [SyncHook],
        rebuildModule: [SyncHook],
        failedModule: [SyncHook],
        succeedModule: [SyncHook],
        addEntry: [SyncHook],
        failedEntry: [SyncHook],
        succeedEntry: [SyncHook],
        dependencyReference: [SyncWaterfallHook],
        finishModules: [SyncHook],
        finishRebuildingModule: [SyncHook],
        unseal: [SyncHook],
        seal: [SyncHook],
        beforeChunks: [SyncHook],
        afterChunks: [SyncHook],
        optimizeDependenciesBasic: [SyncBailHook],
        optimizeDependencies: [SyncBailHook],
        optimizeDependenciesAdvanced: [SyncBailHook],
        afterOptimizeDependencies: [SyncHook],
        optimize: [SyncHook],
        optimizeModulesBasic: [SyncBailHook],
        optimizeModules: [SyncBailHook],
        optimizeModulesAdvanced: [SyncBailHook],
        afterOptimizeModules: [SyncHook],
        optimizeChunksBasic: [SyncBailHook],
        optimizeChunks: [SyncBailHook],
        optimizeChunksAdvanced: [SyncBailHook],
        afterOptimizeChunks: [SyncHook],
        optimizeTree: [AsyncSeriesHook],
        afterOptimizeTree: [SyncHook],
        optimizeChunkModulesBasic: [SyncBailHook],
        optimizeChunkModules: [SyncBailHook],
        optimizeChunkModulesAdvanced: [SyncBailHook],
        afterOptimizeChunkModules: [SyncHook],
        shouldRecord: [SyncBailHook],
        reviveModules: [SyncHook],
        optimizeModuleOrder: [SyncHook],
        advancedOptimizeModuleOrder: [SyncHook],
        beforeModuleIds: [SyncHook],
        moduleIds: [SyncHook],
        optimizeModuleIds: [SyncHook],
        afterOptimizeModuleIds: [SyncHook],
        reviveChunks: [SyncHook],
        optimizeChunkOrder: [SyncHook],
        beforeChunkIds: [SyncHook],
        optimizeChunkIds: [SyncHook],
        afterOptimizeChunkIds: [SyncHook],
        recordModules: [SyncHook],
        recordChunks: [SyncHook],
        beforeHash: [SyncHook],
        contentHash: [SyncHook],
        afterHash: [SyncHook],
        recordHash: [SyncHook],
        record: [SyncHook],
        beforeModuleAssets: [SyncHook],
        shouldGenerateChunkAssets: [SyncBailHook],
        beforeChunkAssets: [SyncHook],
        additionalChunkAssets: [SyncHook],
        additionalAssets: [AsyncSeriesHook],
        optimizeChunkAssets: [AsyncSeriesHook],
        afterOptimizeChunkAssets: [SyncHook],
        optimizeAssets: [AsyncSeriesHook],
        afterOptimizeAssets: [SyncHook],
        needAdditionalSeal: [SyncBailHook],
        afterSeal: [AsyncSeriesHook],
        chunkHash: [SyncHook],
        moduleAsset: [SyncHook],
        chunkAsset: [SyncHook],
        assetPath: [SyncWaterfallHook],
        needAdditionalPass: [SyncBailHook],
        childCompiler: [SyncHook],
        normalModuleLoader: [SyncHook],
        optimizeExtractedChunksBasic: [SyncBailHook],
        optimizeExtractedChunks: [SyncBailHook],
        optimizeExtractedChunksAdvanced: [SyncBailHook],
        afterOptimizeExtractedChunks: [SyncHook] },
     name: undefined,
     compiler: {
        _pluginCompat: [SyncBailHook],
        hooks: [Object],
        name: undefined,
        parentCompilation: undefined,
        outputPath: "/Users/orion/Desktop/react-beauty-highcharts/dist",
        outputFileSystem: [NodeOutputFileSystem],
        inputFileSystem: [CachedInputFileSystem],
        recordsInputPath: undefined,
        recordsOutputPath: undefined,
        records: [Object],
        removedFiles: Set {},
        fileTimestamps: Map {},
        contextTimestamps: Map {},
        resolverFactory: [ResolverFactory],
        resolvers: [Object],
        options: [Object],
        context: "/Users/orion/Desktop/react-beauty-highcharts",
        requestShortener: [RequestShortener],
        running: true,
        watchMode: false,
        watchFileSystem: [NodeWatchFileSystem],
        dependencies: undefined,
        _lastCompilationFileDependencies: [SortableSet],
        _lastCompilationContextDependencies: [SortableSet] },
     resolverFactory:
      ResolverFactory {
        _pluginCompat: [SyncBailHook],
        hooks: [Object],
        cache1: [WeakMap],
        cache2: [Map] },
     inputFileSystem:
      CachedInputFileSystem {
        fileSystem: NodeJsInputFileSystem {},
        _statStorage: [Storage],
        _readdirStorage: [Storage],
        _readFileStorage: [Storage],
        _readJsonStorage: [Storage],
        _readlinkStorage: [Storage],
        _stat: [Function: bound bound ],
        _statSync: [Function: bound bound ],
        _readdir: [Function: bound readdir],
        _readdirSync: [Function: bound readdirSync],
        _readFile: [Function: bound bound readFile],
        _readFileSync: [Function: bound bound readFileSync],
        _readJson: [Function],
        _readJsonSync: [Function],
        _readlink: [Function: bound bound readlink],
        _readlinkSync: [Function: bound bound readlinkSync] },
     requestShortener:
      RequestShortener {
        currentDirectoryRegExp: /(^|!)/Users/orion/Desktop/react-beauty-highcharts/g,
        parentDirectoryRegExp: /(^|!)/Users/orion/Desktop/g,
        buildinsAsModule: true,
        buildinsRegExp:
         /(^|!)/Users/orion/Desktop/react-beauty-highcharts/node_modules/webpack/g,
        cache: [Map] },
     options:
      { entry: "./src/index.js",
        output: [Object],
        module: [Object],
        devServer: [Object],
        externals: [Array],
        mode: "development",
        plugins: [Array],
        devtool: "eval-cheap-module-source-map",
        context: "/Users/orion/Desktop/react-beauty-highcharts",
        cache: true,
        target: "web",
        node: [Object],
        performance: false,
        optimization: [Object],
        resolve: [Object],
        resolveLoader: [Object] },
     outputOptions:
      { filename: "index.js",
        path: "/Users/orion/Desktop/react-beauty-highcharts/dist",
        libraryTarget: "commonjs2",
        pathinfo: true,
        chunkFilename: "[id].index.js",
        webassemblyModuleFilename: "[modulehash].module.wasm",
        library: "",
        hotUpdateFunction: "webpackHotUpdate",
        jsonpFunction: "webpackJsonp",
        chunkCallbackName: "webpackChunk",
        globalObject: "window",
        devtoolNamespace: "",
        sourceMapFilename: "[file].map[query]",
        hotUpdateChunkFilename: "[id].[hash].hot-update.js",
        hotUpdateMainFilename: "[hash].hot-update.json",
        crossOriginLoading: false,
        jsonpScriptType: false,
        chunkLoadTimeout: 120000,
        hashFunction: "md4",
        hashDigest: "hex",
        hashDigestLength: 20,
        devtoolLineToLine: false,
        strictModuleExceptionHandling: false },
     bail: undefined,
     profile: undefined,
     performance: false,
     mainTemplate: {
        _pluginCompat: [SyncBailHook],
        outputOptions: [Object],
        hooks: [Object],
        requireFn: "__webpack_require__" },
     chunkTemplate: {
        _pluginCompat: [SyncBailHook],
        outputOptions: [Object],
        hooks: [Object] },
     hotUpdateChunkTemplate:{
        _pluginCompat: [SyncBailHook],
        outputOptions: [Object],
        hooks: [Object] },
     runtimeTemplate:{
        outputOptions: [Object],
        requestShortener: [RequestShortener] },
     moduleTemplates:
      { javascript: [ModuleTemplate], webassembly: [ModuleTemplate] },
     semaphore:{
        available: 100,
        waiters: [],
        _continue: [Function: bound _continue] },
     entries: [ [NormalModule] ],
     _preparedEntrypoints: [ [Object] ],
     entrypoints: Map { "main" => [Entrypoint] },
     chunks: [ [Chunk] ],
     chunkGroups: [ [Entrypoint] ],
     namedChunkGroups: Map { "main" => [Entrypoint] },
     namedChunks: Map { "main" => [Chunk] },
     modules: [ [NormalModule] ],
     _modules:{
        "/Users/orion/Desktop/react-beauty-highcharts/node_modules/babel-loader/lib/index.js!/Users/orion/Desktop/react-beauty-highcharts/src/index.js" => [NormalModule] },
     cache:
      { "m/Users/orion/Desktop/react-beauty-highcharts/node_modules/babel-loader/lib/index.js!/Users/orion/Desktop/react-beauty-highcharts/src/index.js": [NormalModule],
        chunkmain: [Object] },
     records: { modules: [Object], chunks: [Object] },
     additionalChunkAssets: [],
     assets: { "index.js": [CachedSource] },
     errors: [],
     warnings: [],
     children: [],
     dependencyFactories:{
        [Function] => NullFactory {},
        [Function: WebAssemblyImportDependency] => [NormalModuleFactory],
        [Function: WebAssemblyExportImportedDependency] => [NormalModuleFactory],
        [Function: SingleEntryDependency] => [NormalModuleFactory],
        [Function] => NullFactory {},
        [Function] => NullFactory {},
        [Function] => [NormalModuleFactory],
        [Function] => [NormalModuleFactory],
        [Function] => NullFactory {},
        [Function] => NullFactory {},
        [Function] => NullFactory {},
        [Function] => [NormalModuleFactory],
        [Function] => NullFactory {},
        [Function] => [NormalModuleFactory],
        [Function] => NullFactory {},
        [Function] => [NormalModuleFactory],
        [Function] => NullFactory {},
        [Function] => [ContextModuleFactory],
        [Function] => NullFactory {},
        [Function] => NullFactory {},
        [Function] => NullFactory {},
        [Function] => [NormalModuleFactory],
        [Function] => [ContextModuleFactory],
        [Function] => [NormalModuleFactory],
        [Function] => [ContextModuleFactory],
        [Function] => NullFactory {},
        [Function] => NullFactory {},
        [Function: LoaderDependency] => [NormalModuleFactory],
        [Function] => [NormalModuleFactory],
        [Function] => [NormalModuleFactory],
        [Function] => NullFactory {},
        [Function] => [ContextModuleFactory],
        [Function: ContextElementDependency] => [NormalModuleFactory],
        [Function] => [NormalModuleFactory],
        [Function] => [NormalModuleFactory],
        [Function] => [NormalModuleFactory],
        [Function] => [ContextModuleFactory] },
     dependencyTemplates:{
        "hash" => "",
        [Function] => ConstDependencyTemplate {},
        [Function] => HarmonyExportDependencyTemplate {},
        [Function] => HarmonyInitDependencyTemplate {},
        [Function] => HarmonyImportSideEffectDependencyTemplate {},
        [Function] => HarmonyImportSpecifierDependencyTemplate {},
        [Function] => HarmonyExportDependencyTemplate {},
        [Function] => HarmonyExportDependencyTemplate {},
        [Function] => HarmonyExportSpecifierDependencyTemplate {},
        [Function] => HarmonyExportImportedSpecifierDependencyTemplate {},
        [Function] => HarmonyAcceptDependencyTemplate {},
        [Function] => HarmonyAcceptImportDependencyTemplate {},
        [Function] => AMDRequireDependencyTemplate {},
        [Function] => ModuleDependencyTemplateAsRequireId {},
        [Function] => AMDRequireArrayDependencyTemplate {},
        [Function] => ContextDependencyTemplateAsRequireCall {},
        [Function] => AMDDefineDependencyTemplate {},
        [Function] => UnsupportedDependencyTemplate {},
        [Function] => LocalModuleDependencyTemplate {},
        [Function] => ModuleDependencyTemplateAsId {},
        [Function] => ContextDependencyTemplateAsRequireCall {},
        [Function] => ModuleDependencyTemplateAsId {},
        [Function] => ContextDependencyTemplateAsId {},
        [Function] => RequireResolveHeaderDependencyTemplate {},
        [Function] => RequireHeaderDependencyTemplate {},
        [Function] => RequireIncludeDependencyTemplate {},
        [Function] => NullDependencyTemplate {},
        [Function] => RequireEnsureDependencyTemplate {},
        [Function] => ModuleDependencyTemplateAsRequireId {},
        [Function] => ImportDependencyTemplate {},
        [Function] => ImportEagerDependencyTemplate {},
        [Function] => ImportDependencyTemplate {},
        [Function] => ContextDependencyTemplateAsRequireCall {} },
     childrenCounters: {},
     usedChunkIds: null,
     usedModuleIds: null,
     fileTimestamps: Map {},
     contextTimestamps: Map {},
     compilationDependencies: Set {},
     _buildingModules: Map {},
     _rebuildingModules: Map {},
     fullHash: "41d7d3a4c3eeb4a7fe6a4dcb5b927f6b",
     hash: "41d7d3a4c3eeb4a7fe6a",
     fileDependencies: {
        "/Users/orion/Desktop/react-beauty-highcharts/.babelrc",
        "/Users/orion/Desktop/react-beauty-highcharts/src/index.js",
        _sortFn: undefined,
        _lastActiveSortFn: undefined,
        _cache: undefined,
        _cacheOrderIndependent: undefined },
     contextDependencies: {
        _sortFn: undefined,
        _lastActiveSortFn: null,
        _cache: undefined,
        _cacheOrderIndependent: undefined },
     missingDependencies:{
        _sortFn: undefined,
        _lastActiveSortFn: null,
        _cache: undefined,
        _cacheOrderIndependent: undefined } },
  hash: "41d7d3a4c3eeb4a7fe6a",
  startTime: undefined,
  endTime: undefined }

感觉之前所以的对象都放在了一个合集里，给人而全的感觉

里面主要含有一个对象
inputFileSyste，options，输出的outputOptions，dependencyFactories等
给每次打包一个hash值，代表唯一性

天啊

GPU云服务器 云服务器 源码浅析 源码中文说明之 粗解 cdn浅析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101226.html

相关文章

  • 浅析webpack源码之Tapable粗解（五）

    摘要：打开是个构造函数，定义了一些静态属性和方法我们先看在插件下地址上面写的解释就跟没写一样在文件下我们看到输出的一些对象方法每一个对应一个模块而在下引入的下面，我们先研究引入的对象的英文单词解释，除了最常用的点击手势之外，还有一个意思是水龙头进 打开compile class Compiler extends Tapable { constructor(context) { ...

    Arno 评论0 收藏0

  • 浅析webpack源码之Compilation.js粗解(九)

    摘要：编写良好的模块提供了可靠的抽象和封装边界，构成了一致的设计和明确的目的。块此特定术语在内部用于管理捆绑过程。捆绑包由块组成，其中有几种类型例如入口和子。总结一个块是进程中的一组模块，一个是一个发出的块或一组块。 我们先看一下 compilation是什么？是一个很大的对象打印key值 [ _pluginCompat, hooks, name, compiler, res...

    Tangpj 评论0 收藏0

  • 浅析webpack源码之前言（一）

    为什么读webpack源码 因为前端框架离不开webpack，天天都在用的东西啊，怎能不研究 读源码能学到很多做项目看书学不到的东西，比如说架构，构造函数，es6很边缘的用法，甚至给函数命名也会潜移默化的影响等 想写源码，不看源码怎么行，虽然现在还不知道写什么，就算不写什么，看看别人写的总可以吧 知道世界的广阔，那么多插件，那么多软件开发师，他们在做什么，同样是写js的，怎么他们能这么伟大 好奇...

    suosuopuo 评论0 收藏0

  • 浅析webpack源码之processOptions处理Options以及入口函数（三）

    摘要：我们打开根据上次所返回的这个因为有了上次的基础，比较容易读了大体逻辑是这样的先定义一个空对象同上次的一个逻辑，还是一个目前的方式只有一个满足如果满足的会执行一系列函数这个函数直接结果是的影响是打比如如果满足的话当你的时候就会在页面上出 我们打开bin/cli.js根据上次所返回的Options processOptions(options)这个因为有了上次的基础，比较容易读了,大体逻辑...

    doodlewind 评论0 收藏0

  • 浅析webpack源码之convert-argv模块（二）

    摘要：接下来我看看一下函数我们先按照分支走为读取是里的对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧 打开webpeck-cli下的convert-argv.js文件 // 定义options为空数组 const options = []; // webpack -d 检查 -d指令 if (argv.d) { //... } ...

    lemon 评论0 收藏0

发表评论

登陆后可评论

0条评论

Andrman

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<