构建Webpack知识体系|青训营笔记

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

学习对于webpack的认知和应用

重点知识

• Webpack的本质
• Webpack的定义解析
• Webpack的优势

具体内容

为什么学习webpack

1. 理解前端工程化
2. 团队熟悉webpack
3. 高阶前端必经之路

什么是webpack

• 前端由资源构成
• 之前要手动管理文件 严格按顺序依赖 影响开发效率
• webpack 主流的构建工具
• 前端资源的编译 打包工具
• 目前支持Babel Eslint Ts等

webpack使用

1.安装依赖

   npm i -D webpack webpack-cli

2.编译配置文件

    module.export={
     entry:  //入口
     mode:   //开发模式
     devtools: 
     ouput:{ //出口
         filename: //输出名称
         path:     //输出路径
     }
    }

3.执行编译命令

    npx webpack 

webpack 核心流程

1. 入口处理
2. 依赖解析
3. 资源解析
4. 资源合并打包 代码会优化 2 3 会递归调用 直到资源处理完毕

模块化+一致性

如何写配置文件

流程类 作用于流程的某个环节

工具类 提供工程化能力 开发效率相关 性能优化相关 日志相关

使用频率高

1. entry output
2. moduel plugin 处理CSS文件 加入module 中的css-loader style-loader

    module :{
       rules:[{
           test:  // 处理文件类型
           use:   // 对应loader
       }，
       {
           test：
           use：[{loader: ,options:{presets:[[]] }  }]
       }]
    }

HTMLWebpackPlugin 自动生成HTML文件 3. mode
4. watch devServe devtool

1. 热更新 配置DevServe下 hot 为TRUE
2. watch 会持续监听文件的变化
3. tree shaking mode设为production和 optimization 下usedExports 设为TRUE

loader组件

为了处理非标准JS，使用资源翻译模块 loader 转化为JS资源

• less-loader less=>css
• css-loader 包装css模块
• style-loaer 将css模块包进require语句 调用时通过函数将内容注入

plugin 组件

插件架构 提升应用扩展性， webpack 本身也是由插件组合得来的

如何学习webpack

1. 入门应用 理解打包流程 掌握常用配置、loader、插件的使用 掌握常见脚手架用法
2. 进阶 理解Loader Plugin的机制 理解常见性能优化手段
3. 大师 阅读源码 理解编译 打包的原理