webpack的构建流程

71 阅读1分钟

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等服务

思考问题:

  1. plugin和loader区别
  2. 某个配置项

vue-loader的用法: 一个webpack的loader,用来解析和转换vue文件,提取出其中的script style complate分别把它们交给对应的loader去处理

特性:

  • 允许为vue组件每个部分使用对应loader
  • 允许在vue文件中使用自定义模块和自定义loader
  • 将style和template中引用的资源当作模块依赖处理,为每个这样的组件模块出scope
  • 允许热重载

使用场景

  1. 编译template将编译用作vue的template选项,url转换成webpack的模块请求
  2. 调用预处理
  3. 允许热重载