首页 > 其他分享 >webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全

webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全

时间:2022-11-10 20:58:13浏览次数:53  
标签:输出 翻译 读取 文件 流程 webpack 模块 说全

webpack 的运行流程是一个串行的流程,从启动到结束会依次执行以下步骤 ;

  1. 初始化参数:在配置文件,读取并合并参数,得到最终的参数 ;

  2. 开始编译:拿着上一步的参数初始化 Compiler 对象,加载所有配置的 plugin ,开始执行编译 

  3. 确定入口:根据配置中的 entry 找到入口文件 

  4. 翻译模块:调用所有配置的 loader 对模块进行翻译,在找出该模块所有的依赖模块进行翻译,直到所有的依赖文件都经过了翻译,最终得到翻译后模块以及它们之间的依赖关系

    ps:比如 scss 和 less 使用 css-loader 翻译成为 css 代码 ;

  5. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的chunk文件,在把每个chunk转换成单独文件添加到输出列表,准备输出 ;

  6. 输出完成:确定好了输出内容后,根据配置文件确定输出路径和文件名 ,把文件内容写入到文件系统 ;

 

标签:输出,翻译,读取,文件,流程,webpack,模块,说全
From: https://www.cnblogs.com/zhulongxu/p/16878731.html

相关文章