这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
为什么要学习weboack？
工程化中心的工具
团队中要有人熟悉Webpack
某种程度上能够称为个人的核心竞争力
高阶前端必经之路
什么是webpack?
前端项目由资源构成。
资源是指如：图片，JS，CSS，VUE,JSX等代码文件或者是媒体文件等文件
很久以前是通过手动管理资源的形式进行资源管理
手工依赖过程繁琐，文件有依赖的时候要按照依赖写。
开发环境与生产环境一致。难以接入JS或者TS的新特性。
JS、图片、CSS资源管理模型不一致。
比较难接入Less，Sass等工具
为了解决以上问题，出现了
- webpack
- Vite
- rollup.js
- browserify
- ...
webpack 本质上是一个全段资源编译、打包工具。
- 多份资源文件打包成一个 Bundle。
- 支持Babel、 Eslint、TS、 CoffeScript、 Less、 Sass
- 支持模块化处理 css、图片 等资源文件
- 支持 HMR+开发服务器
- 支持持续监听、持续构建，支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
webpack模块化和一致性
- 多个文件资源合并成一个，减少 http 请求次数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript 方言
- 统一图片、CSS、字体 等其它资源的处理模型
- ...
使用webpack
安装webpack
npm i -D webpack webpack-cli
编辑配置文件
//webpack.config.js
module.exports={
entry: 'main.js',
output: {
filename: "[name].js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader']
}]
}
}
entry是项目文件的入口
output是出口，打包后的文件放在output设置的path中。文件名设置为filename中的名字。
执行编译命令
npx webpack
核心流程(简化)
1.入口处理
从entry文件开始，启动编译流程
2.依赖解析
从entry文件开始，根据require或者import等语句找到依赖源。
3.资源解析
根据module配置，调用资源转移器，将png、CSS等非标准JS资源转化为JS内容
4.递归调用2，3，找到所有依赖资源
5.资源打包合并
将转译后的资源内容合并打包为可以直接在浏览器上运行的JS文件。
使用配置文件
基本就是配置文件
大致分2类
流程类 ------ 作用域流程中某个或者若干个环节。直接影响打包效果的配置项。
工具类 ------ 主流程之外，提供更多工程化能力的配置项
文件结构
在src中index.js指定一个entry和output，分别对应“输入和输出”
当mode设置为默认值production时，产物为进行压缩。
处理非JS文件，如CSS
定义moudle属性，rules中test：满足test采会用module进行处理。use则是用什么module进行处理这个test。
- 首先安装Loader
npm add -D css-loader style-loader
- 添加module处理CSS文件
const path = require("path");
module.exports={
entry: "./src/index",
output: {
entry: "./src/index",
output:{
filename: "[name].js",
path: path.join(__dirname,"./dist"),
},
module: {
rule: [{
test: /\.css/i,
use: [
"style-loader",
"css-loader"
],
}],
}
},
};
处理JS，使用Babel
代码转译工具，为了兼容各个浏览器或者是浏览器版本
Babel将高版本的代码转化为低版本的代码
- 安装依赖
npm i -D @babel/core @babel/preset-env babel-loader
- 配置
const path = require("path")
module.export = {
entry: "./src/index";
output:{
filename: "[name].js",
path: path.join(__dirname,"./dist"),
},
module:{
rule: [{
test:/\.js?$/,
use: [{
loader: 'babel-loader',
options: {
loader: 'babel-loader',
options:{
presets:[
[
'@babel/preset-env'
]
]
}
},]
}],
},
};
指定loader引入babel，设定一个options中的presets使用babel进行处理
最后使用npx webpack进行打包
preset babel的规则集
@babel/preset-react 处理JSX的代码
@babel/preset-typescript 处理TS的代码
思考
babel的功能？
对新特性的JS代码进行优化，使其兼容各种浏览器。
Babel与webpack解决了什么内容？为什么能协同在一起？
Babel解决了JS浏览器不兼容的问题，webpack解决了文件大小压缩，JS或者TS或者是其他如CSS的兼容问题。webpack最终打包为JS文件。如果使用babel，应该能将最后转化成的JS文件进行浏览器兼容。从而使得各种浏览器都能运行网页。
生成HTML
通过JS文件自动生成HTML文件。
- 安装依赖
npm i -D html-webpack-plugin
- 配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index",
output: {
filename: "[name].js",
path: path.join(__dirname,"./dist"),
},
plugins: [new HtmlWebpackPlugin()]
};
思考：这种做法有什么优劣？
优：很方便的对JS进行调试
劣：相比于手动写HTML，自动生成的HTML的某些内容或者样式可能不如人意。
HMR(Hot Module Replacement)模块热替换
改的CSS等内容能够马上在页面中刷新，不用项目重启。
- 开启HMR 配置
module.exports = {
devServer: {
hot: true
}
watch: true
};
- 启动
npx webpack serve
需要注意的是，需要配置babel和css loader处理。还需要一个watch为true对文件进行持续监控。
Tree-Shaking
删除Dead Code.
代码没有用到，不可达到。
代码的执行结果没有用。
模块导出了但是没有用到
代码只读不写
...
- 开启Tree-shaking
module.exports = {
mode: "production",
optimization: {
usedExports: true
}
};
对工具类库如lodash优化有奇效
结语：
本节课学习了Webpack的使用和配置。之前一直不知道webpack怎么用。通过这节课已经对webpack有了一定的基础性了解。后续在项目中深入使用仍然要查查文档，继续学习。
引用参考：
Webpack 定义解析 - 掘金 (juejin.cn)
Webpack 使用方法 - 掘金 (juejin.cn)
