Webpack | 青训营笔记

玉衡Kqing
89 阅读3分钟

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

重点内容：🍇Webpack🍇

🍈前言🍈

Webpack是什么，为什么要用Webpack？这个名字听起来就像Web包工具，接下来我们就一起来回顾一下今天所学吧~

🍉为什么要学习Webpack？🍉

  • 理解前端“工程化”概念、工具、目标:通过学习Webpack可以了解什么是工程化，工程化的工具有哪些，目标又是什么。
  • 一个团队总要有那么几个人熟悉，Webpack某种程度上可以成为个人的核心竞争力：因为每个团队都需要对项目进行工程化管理，这个时候一定会用到Webpack。
  • 高阶前端必经之路

🍊什么是Webpack🍊

一个前端项目，通常是由大量资源构成的，这些资源包括图片，文字，CSS，JS，TS等等。 Webpack本质上是一种前端资源编译、打包工具。

image.png

  • 多份资源文件打包成一个 Bundle
  • 支持 Babel、Eslint、TS、CoffeScript、Less、Sass
  • 支持模块化处理 css、图片 等资源文件
  • 支持 HMR + 开发服务器支持持续监听、持续构建
  • 支持代码分离
  • 支持 Tree-shaking、Sourcemap等

🍍Webpack的使用🍍

核心流程

image.png

  1. 入口处理：从entry文件开始读入，启动编译流程；
  2. 依赖解析：解析"require" or "import"等语句找到依赖资源；
  3. 资源解析：根据"moudule"配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容；
  4. 资源的合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件。

处理CSS

1.安装Loader

npm add -D css-loader style-loader

2.添加"module"处理css文件

image.png

用一个test去过滤文件，保留.CSS后缀的文件，然后再用一个use去定义一个处理这个文件的module序列。

接入Babel

Babel本质上就是一种JS代码转译工具，把高版本的JS代码转译成一个低版本的JS代码。

1.安装依赖（core,preset,loader）

npm i -D @babel/core @babel/preset-env babel-loader

2.生命产物出口"output"

image.png

如上图所示，我们定义一个module，声明一个test去过滤js文件，用babel-loader去处理js文件，然后在output中指定输出文件路径，最后执行'npx webpack'。

生成HTML

生成HTML比较特殊，它使用的是一个插件，自动生成HTML文件。

1.安装依赖

npm i -D html-webpack-plugin

2.生命产物出口"output"

image.png 由于是插件，所以比较简单好用，直接定义output位置后，声明一个plugins填入内容即可。在生成的html文件中，会自动的插入样式资源和JS资源。

工具线

image.png

HMR
  • Hot Module Replacement —— 模块热替换：写完的代码效果会立刻更新到浏览器中。 image.png 在devServer中声明hot为true，然后使用npx webpack server来启动服务。
    另外还要注意声明watch为true，这样才能随着代码的保存自动更新效果。
Tree-Shaking
  • Tree-Shaking —— 树摇：用于删除Dead Code，也就是说删除引入但没有用到的代码，这些没有用到的内容就不会被打包到项目中。
    开启方法
    • mode:production
    • optimization.usedExports: true

🍑总结🍑

本节课程主要了解了Webpack的定义和核心流程使用，接入babel和使用树摇是比较常用的部分，由于时间原因，没有涉及其他深入的工具线，接下来就需要我们自己去探索了~

avatar
文章
阅读
粉丝