Webpack|青训营笔记这是我参加[第五届青训营]伴学笔记创作活动的第12天本堂课程重要知识了解Webpack 的

这是我参加[第五届青训营]伴学笔记创作活动的第12天

本堂课程重要知识

了解Webpack 的本质、定义解析和优势
理解 Loader和插件

下文涉及到每部分的部分思考题是课堂中老师有提及的知识，作为回顾复习对自己的反问

学习webpack原因

理解前端"工程化"概念、工具、目标
一个团队总要有那么几个人熟悉Webpack,某种程度上可成为个人的核心竞争力
高阶前端必经之路

什么是Webpack

前提概要： 前端项目是由各种资源构成，包括图片(png/jpg/gif/webp)、脚本文件(js/ts/jsx)、样式文件(css/less/sass)和框架(vue)等。虽然可手动管理资源，但依赖手工,过程繁琐;当代码文件之间有依赖的时候,就得严格按依赖顺序书写;开发与生产环境一致,难以接入TS或JS新特性;比较难接入Less、Sass等工具;JS、图片、CSS资源管理模型不一致等问题对开发效率造成麻烦。

故，自09年起出现了很多工程化工具，然后有了“前端工程”的概念
【本质】 一种前端资源编译、打包工具

使用webpack

1.安装

输入命令npm i -D webpack webpack-cli

2.编辑配置文件

webpack.config.js

entry-定义当前项目的入口
output-定义打包后项目文件的位置

3.执行编译命令

输入命令npx webpack

最终结果如下图
import变成require，多个资源合成一个资源 核心流程 实质上，webpack做两件事情——模块化和一致性

多个文件资源合并成一个,减少 http请求数
支持模块化开发
支持高级JS特性
支持 Typescript、CoffeeScript方言
统一图片、CSS、字体等其它资源的处理模型
...

如何编写配置文件

配置项大致分为两类：

流程类:作用于流程中某个or若干个环节,直接影响打包效果的配置项
工具类:主流程之外,提供更多工程化能力的配置项可以从红色框出的配置项配置起，基本上只要由entry和output就行

处理CSS

1.安装Loader npm add -D css-loader style-loader 2.添加module处理css文件
test：/\.css$/过滤条件
用use中的loader来处理满足test条件的文件
Loader的作用：处理不同资源
思考题:

Loader有什么作用?为什么这里需要用到css-loader、style-loader
与旧时代在HTML文件中维护css相比,这种方式会有什么优我劣处?
有没有接触过 Less、Sass、Stylus这一类 CSS预编译框架?如何在Webpack接入这些工具?

参考资料:

处理js，接入Babel(代码转译工具)

高版本的js代码转成低版本的，缘由ES6的出现导致某些无法使用
1.安装依赖 npm i -D @babel/core @babel/preset-env babel-loader
2.声明产品出口 output

3.执行npx webpack
思考题:

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

参考资料:

生成HTML

1.安装依赖 npm i -D html-webpack-plugin
2.声明产品出口 output

3.执行npx webpack

思考题:

相比于手工维护HTML内容,这种自动生成的方式有什么优就缺点?

参考资料:

html-webpack-plugin

工具线

1.判断配置项类型(工具/流程)
2.再详细判断

流程类-属于哪个流程
工具类-属于提升哪方面的工具

HMR

Hot Module Replacement--模块热替换
修改的代码能在不刷新浏览器的情况下立刻显示在浏览器上

Webpack 原理系列十：HMR 原理全解析	Tecvan
	1.配置HMR 2.处理css 3.生成html 4.启动监听

Tree-Shaking

树摇，用于删除Dead Code
对工具类库如Lodash有奇效 Dead Code

代码没有被用到,不可到达
代码的执行结果不会被用到
代码只读不写

Tree-Shaking

模块导出了,但未被其它模块使用

其他

缓存版本5之后效果较好
SourceMap 提升线上调试的效率
性能监控
日志
代码压缩
分包
...

思考题:

除上面提到的内容,还有哪些配置可划分为"流程类"配置?
工具类配置具体有什么作用?背后使用的技术分别是什么？包括devtool/cache/stat等

参考资料 awesome-webpack-4plus 深入浅出 Webpack survivejs-webpack Book

理解 Loader

核心功能：用于将资源翻译为标准JS
1.安装各种需要的loader包
2.在配置文件添加对应的module处理资源，以处理css为例

认识Loader:链式调用

less-loader:实现less=>css的转换
css-loader:将CSS包装成类似module.exports="${css}"的内容,包装后的内容符合JavaScript语法
style-loader:将css模块包进require语句,并在运行时调用 injectStyle等函数将内容注入到页面的style标签
检测loader包的操作：1.在对应loader包中添加debugger;2.执行ndb npx webpack