202108-09 webpack

76 阅读1分钟
  1. 常用loader sourcemap,bable,ts,less,eslint等

  2. 常用plugin tree-shaking 无用模块标记,dll分包,不会改动的不会再次编译,exclude如jquery等。happpack多线程打包,commonthunk提取公共代码

  3. loader是函数,接受并返回结果。在rules配置

  4. plugin是插件,为了让webpack加载非js文件

  5. 编译:入口 模块 输出

  6. 打包原理:导入导出,按步骤执行

  7. 热更新是服务端推送的实践,修改代码后webdevserver向浏览器推送,客户端对比后想webdevserve发请求

  8. webpack优化:高版本,多线程,图片压缩,g-zip

  9. plugin实现思路:webpack也有生命周期,在合适的钩子内的参数是plugin的实例,

  10. bable原理:AST语法数转换

  11. webpack基于入口,grunt gulp基于任务和流

  12. hash基于项目更改会重新生成,thunkhash公共库不会再次打包编译, contenthash 修改后的文件才会再次打包编译