erqiae的博客

/1. webpack加载webpack.config.js配置项，解析到plugins属性使，执行new TestPlugin，执行插件constructor//2. webpack创建compiler对象(webpack一次执行创建一个)//3. 遍历所有plugin插件，调用apply方法//4. 执行剩下编译流程（触发各hook事件）console.log("执行constructor")console.log("执行apply方法");debugger;//tap同步钩子。

/node_modules/webpack-cli/bin/cli.js ： 执行webpack指令，加载webpack.config.js中的内容。由于compiler和compliation对象中属性太多，直接在终端打印会难以对里面的内容进行观测。5. 打开浏览器任意窗口,f12，点击绿色按钮进入调试工具。6. 点击开始按钮，就会跳到打了debugger的地方。这里可以利用node调试的方式，对数据进行观测。然后就可以很清晰的看到相关属性了。--inspect: 进行调试。-brk:在首行打断点。

webpack调用对应类型的loader解析资源，在加载loader配置时，调用loader属性中提供的loader函数，并将处理文件作为参数传到loader函数中，进行处理并返回出去loader接收参数content：被处理后的文件内容mate：别的loader传递的数据loader不同方式同步loader//方式一//当前资源只需一个loader处理，推荐使用这种方式//方式二//处理的资源需要使用多个loader时推荐使用// 第一个参数为是否有错误module: {

Webpack的运行流程是一个串行的过程，它从启动运行到结束主要概括为三个步骤从配置文件和Shall语句中读取并合并参数，得到最终参数配置文件默认是webpack.config.js，也可以以命令的方式指定配置文件，它的主要作用是用来激活webpack的配置项和插件 webpack会将webpack.config.js中的各配置项拷贝到options对象参数中，并加载用户配置的plugins然后初始化Compiler编译对象，加载所有plugin插件Compiler对象中包含了webpack的生命周期

对于Webpack的优化方案，可以从以下几个方面入手。