webpack学习|青训营笔记

KIKI37
110 阅读3分钟

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

一、本堂课重点内容： f2c4303eb7c53462004f8e3e137fca7.jpg

二、详细知识点介绍：

  • 学习webpack的意义

    理解前端 “ 工程化 ” 概念、工具、目标，减少界面请求数量

  • webpack的定义

    webpack是一种前端资源编译、打包工具，前端项目由许多资源文件构成，使用webpack可以模块化处理过多资源，将有依赖关系的模块打包成静态资源，提高开发效率。

  • webpack打包核心流程

    1）入口处理

    从'entry" 文件开始，启动编译流程

    2）依赖解析

    从'entry' 文件开始，根据require or import’ 等语句找到依赖资源

    3）资源解析

    根据imodule' 配置，调用资源转移器，将png、CSS等非标准JS资源转译为JS内容

    4）资源合并打包

    将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

  • webpack的使用

    • 使用类型

      • 流程类

        作用于流程中某个or若干个环节，直接影响打包效果的配置项

      • 工具类

        主流程之外，提供更多工程化能力的配置项

    • 使用过程

      • 处理CSS —— Loader

        Loader有什么作用，为什么这里需要用到css loader、 style -loader

         webpack是不能直接识别各种样式资源（css、less、scs等），要通过loader资源来帮助webpack解析样式资源

      • 处理JS —— Babel

        Babel具体有什么功能?

        对JS代码进行代码编译的处理，即做兼容性处理，ES6 -> ES5等

        Babel与Webpack分别解决了什么问题?为何两者能协作到一起了?

        Babel的定位是编译器，主要做es语法的转换（浏览器不认识的语法编译成浏览器认识的语法），确保最新的的es特性能够以最快的速度递到开发者手中， 但是不负责模块的组合。 
Webpack更多是将输入的各个模块用自己内部的一套逻辑将代码“链接”起来， 起胶水的作用， 并且目标是输出可以直接在浏览器中执行的代码。（参考）

      • 生成HTML

    • 使用工具

      HMR

      webpack 将对修改并保存后的代码重新打包发送至浏览器端，浏览器在不刷新的前提下可以对应用进行模块更新

      Tree-Shaking

      用于移除 JavaScript 上下文中的未引用代码

  • 扩展webpack

    • 插件

      • 精髓

        只做最核心的一部分，但对扩展开放，对修改封闭

      • 功能

        通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便

    • loader —— 内容转化

      • 核心功能

        非JS资源转换为JS资源

      • 作用

        协助webpack打包处理特定的文件模块

      • 常用loader 87960ff08dd4aa77a90e0213d4cbc86.png

三、引用参考：

  • 文章中

    Babel与Webpack分别解决了什么问题 参考引用于知乎 - xiawenqi -  webpack和babel的区别和分工 一文

常用loader 图片引用于 前端入门 - 工具篇 - 理解loader 课程
avatar
文章
阅读
粉丝