webpack启动后,从entry开始,递归解析entry依赖的所有module,找到每一个module,根据每一个module.rules里配置的Loader进行相应的转换处理,对module转换后,解析当前module依赖的其它模块,解析的结果是一个一个的chunk, 最后webpack会将所有chunk转成文件输出的output
在整个构建过程中,webpack会执行plugin当中的插件,完成plugin的任务
- entry:模块入口,使得源文件加入到构建流程中。
- output:配置如何输出最终代码
- module: 配置各种类型的模块的处理规则
- plugin:配置扩展插件的
- devServer:实现本地服务包括: http 模块热替换 source map等服务
思考问题:
- plugin和loader区别
- 某个配置项
vue-loader的用法: 一个webpack的loader,用来解析和转换vue文件,提取出其中的script style complate分别把它们交给对应的loader去处理
特性:
- 允许为vue组件每个部分使用对应loader
- 允许在vue文件中使用自定义模块和自定义loader
- 将style和template中引用的资源当作模块依赖处理,为每个这样的组件模块出scope
- 允许热重载
使用场景
- 编译template将编译用作vue的template选项,url转换成webpack的模块请求
- 调用预处理
- 允许热重载