美文网首页
webpack打包后的文件简单分析

webpack打包后的文件简单分析

作者: 追星人小豪 | 来源:发表于2020-11-19 14:05 被阅读0次

    webpack

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    image

    Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    本文主要是分析webpack打包后的文件


    新建打包

    1. 新建测试模块

    新建两个 js , 导出简单的函数

    # add.js
    const add = (a, b) => a + b; 
    
    # sub.js
    const sub = (a, b) => a - b; 
    
    

    新建主入口方法 index.js,分别引入对应模块方法

    # index.js
    const { add } = require('./add');
    const { sub } = require('./sub');
    
    console.log(add(99, 1));
    console.log(sub(99, 1));
    

    新建webpack配置

    # webpack.config.js
    module.exports = {
      mode: 'development',
      // mode: 'production',
      devtool: 'source-map',
      entry: resolve('./index.js'),
      output: {
        path: resolve('./dist'),
      }
    };
    

    执行打包, npm run build

    执行打包后的js,运行正常


    打包后的文件分析

    瞄一眼打包后的文件: main.js

    从上到下扫一遍后,可以发现其是一个匿名的自执行函数,函数内部定义了一个 webpack_modules 对象,一个闭包:webpack_require 函数,一个 webpack_module_cache 对象,看名字就知道这是一个缓存对象,下面又是一个匿名的自执行函数

    1. 展开下面的匿名自执行函数:

    其实就是入口 index.js 里的代码块,对导出模块部分做了相应的处理,其内部调用 webpack_require 函数实现了模块的导入功能

    1. 展开 webpack_require 函数:

    内部也比较简单,使用了 webpack_module_cache 缓存模块,第一次导入模块时 在 webpack_modules 根据模块id(如 './add.js"')导入相应的模块并写入缓存

    1. 展开 webpack_modules :

    其实就是集成了所有模块的一个集合,至此整个模块流程分析完了


    源码


    END

    相关文章

      网友评论

          本文标题:webpack打包后的文件简单分析

          本文链接:https://www.haomeiwen.com/subject/jtozmktx.html