Webpack知识体系（1）｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第10天什么是Webpack 背景

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

什么是Webpack

背景
- 前端由各种资源文件构成
- 旧时代手动管理资源
  - 手动管理资源有过程繁琐、依赖顺序麻烦、开发生产环境无法区分难以应用新特性、难接入Less和Sass等工具、资源管理模型不一致等各种问题
- 现在有很多工程化工具，比如Gulp rollup.js browserify Vite等
Webpack本质上是一种前端资源编译打包工具
- 把非标准JavaScript的文件编译成js的文件
- 多份资源文件打包成一个Bundle
- 支持Babel Eslint TS CoffeScript Less Sass
- 实现模块化和一致性
  - 支持模块化处理CSS 图片等资源文件，统一了资源文件的管理模型
  - 多个文件资源合并成一个，减少http请求数
  - 支持模块化开发
  - 支持高级JavaScript特性
  - 支持TypeScript CoffeeScript等方言
- 支持 HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking SourceMap等

使用Webpack

示例
- npm安装 webpack webpack-cli
- 编写配置文件webpack.config.js
- 执行编译命令npx webpack
- 得到编译打包后的文件
核心流程
- 1. 入口处理
  - 从entry文件开始，启动编译流程
- 1. 依赖解析
  - 从entry文件开始，根据require或import语句等找到依赖资源
- 1. 资源解析
  - 根据module配置，调用资源转移器，将CSS文件 png文件等非标准JS资源转译为JS内容
- 递归调用第二和第三步，直到所有资源处理完毕
- 4.资源合并打包
  - 将转译后的资源内容合并打包成可直接在浏览器运行的JavaScript文件
使用Webpack的两类配置（官方文档）
- 流程类
  - 作用于流程中的某个环节或者若干个环节，直接影响打包效果的配置项
  - 对应核心流程
    - 输入: entry context
    - 模块解析: resolve externals
    - 模块转译: module
    - 后处理: optimization mode target
- 工具类
  - 在主流程之外提供更多工程化能力的配置项
  - 开发效率类 watch devtool devServer
  - 性能优化类 cache performance
  - 日志类 stats infrastructureLogging
  - 其他 amd bail等
示例

// webpack.config.js 示例
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	// 声明第二步的入口文件
	entry: "main.js",
	// 声明是生产环境(production)还是开发环境(development)
	// 如果是生产环境，产物会进行压缩
	mode: "development",
	devtool: false,
	// 声明打包后文件的名称和输出位置
	output: {
		filename: "bundle.js"
		path: path.join(__dirname, './dist')
	},
	module: {
		rules: [
			// 处理CSS文件
			{
				// 过滤条件
				test: /\.css$/
				// 对符合过滤条件的文件用相应loader处理
				use: ['style-loader', 'css-loader']
			},
			// 用babel处理js文件
			{
				test: /\.js$/
				use: [{
					loader: 'babel-loader',
					// 传入loader的参数
					options: {
						// 规则集
						presets: [
							['@babel/preset-env']
						]
					}
				}]
			}
		]
	},
	// 生成html
	plugins: [
		new HtmlWebpackPlugin()
	],
	devServer: {
		// 开启HMR
		hot: true
	},
	optimization: {
		// 开启Tree-Shaking
		usedExports: true,
	},
}

处理CSS
- !npm add -D css-loader style-loader
- 添加module处理CSS文件
处理JavaScript - 接入Babel
- Babel本质上是一种代码转译工具
- 一开始是为了把ES6转译成低版本的代码，从而让不支持ES6新特性的浏览器能够运行
- 步骤
  - !npm i -D @babel/core @babel/preset-env babel-loader
  - 在output声明产物出口
  - !npx webpack
生成HTML
- 自动化管理资源，省去手动管理烦恼
- 可以在插件配置html的title等
- 步骤
  - !npm i -D html-webpack-plugin
  - 在output声明产物出口
  - !npx webpack
工具类
- HMR
  - Hot Module Replacement 模块热替换
  - 浏览器不需要刷新即可更新代码
  - 步骤
    - devServer.hot: true
    - !npx webpack serve
- Tree-Shaking
  - 删除无用代码
  - 对Lodash等工具类库有奇效
  - 步骤
    - mode设置为production
    - optimization.usedExports: true
- 缓存
- SourceMap
- 性能监控
- 日志
- 代码压缩
- 分包

Webpack知识体系（1） ｜ 青训营笔记

什么是Webpack

使用Webpack

Webpack知识体系（1）｜青训营笔记