webpack的运行流程是一个串行的过程,它的工作流程就是将各个插件串联起来。它主要包括有三大步骤:
1、初始化:Webpack 从配置文件和 Shell 语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数。
2、编译构建:Webpack 从 Entry(入口文件)开始,针对每个 Module(模块)串行调用对应的 Loader 去翻译文件内容,再找到该 Module 依赖的 Module,递归地进行编译处理。
3、输出:对编译后的 Module 组合成 Chunk,把 Chunk 转换成文件,输出到文件系统。
具体步骤如下:
初始化流程:Webpack 读取配置文件 webpack.config.js,创建一个 Compiler 对象,这个对象会管理整个构建过程
。
编译流程:
compile:开始编译,构建一个 Compilation 对象,这个对象是编译阶段的主要执行者。
make:从入口点分析模块及其依赖的模块,创建这些模块对象。
build-module:构建模块,调用配置的 Loader 转换文件,使用解析器(如 Acorn)将源码转换成抽象语法树(AST)。
seal:封装构建结果,生成 Chunk,进行优化处理。
输出流程:
emit:把各个 Chunk 输出到结果文件,确定最终输出内容。
输出完成:根据配置确定输出的路径和文件名,将文件内容写入到文件系统。
在整个过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
此外,Webpack 也支持通过配置文件来管理复杂的构建需求,例如指定入口(entry)、输出(output)、加载器(loaders)和插件(plugins)等。
最后,Webpack 还支持 npm scripts,可以通过在 package.json 中添加脚本来运行 Webpack,例如 "build": "webpack",然后通过 npm run build 来执行构建
。