webpack ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

webpack定义

1. 核心流程

   • 入口处理 从entry​ 开始启动编译流程
   • dependencies lookup 依赖解析 根据require 和import找到依赖项
   • transform 资源解析 将png css等非标准js资源转译为js内容
   • combine assets 资源合并打包 将转移后的资源打包为可以在浏览器运行的js

2. 根据后缀名处理不同的文件

   module:{
     rules:[
       test:/\.css/i,//这个后缀名的文件用use里面的loader处理,1.  这里的正则表达式不带引号,带引号是别的意思
       use:["style-loader","css-loader"]
       ]
   }
   

3. 转译js代码 Babel 将高版本的js或者ts转译成低版本的浏览器能识别的代码

   test:/\.js$/i
   use:[
   {
     loader:"babel-loader"
     options:{//将options传递给loader
       presets:[
         ["@babel/preset-env"]
   ]}}]
   

4. 使用插件生成HTML 可以不用手动去写HTML的模板

   plugins:[new HTMLWebpackPlugin()]
   

5. hmr 热更新 对代码的修改可以实时的体现在浏览器中

   devServer:{
     hot:true,
     open:true
   }
   watch:true//监视对代码的修改
   

6. tree-shaking 将用不到的代码删除

   mode:"production"//同时会开启代码压缩
   optimization:{
     usedExports:true 
   }
   

7. loader 将非js资源转换为js资源

   • style-loader 将css模块包进模块, 将内容注入到style标签
   • css-loader 将css包装成导入导出语法 符合js的语法
   • less-loader将less=>css
   • loader链式调用
   • 前一个loader处理过的内容将传递给下一个loader

8. plugin 插件对扩展开放 对修改封闭 降低项目复杂性

   hook 编译过程的事件

9. plugin在webpack各个事件的执行过程中在合适的时机注入一些逻辑

   比如在开始阶段用entryplugin将入口文件entry传递给webpakc

10. 能用 掌握常用loader和plugin的配置, 能配置一些常用脚手架 例如vue-cli create-react-app=>理解并写一些loader 性能优化=>阅读源码 参与贡献

11. gitmind.cn/app/docs/m1…