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

Webpack 定义解析

什么是 Webpack

在上一个世代，写一个html
需要用一个<link>标签去声明引入一个调用式文件，需要用<image>标签去引入一个图片文件，需要用n
个<script>标签去引入n个js文件。
但，
当外部资源很多时，假如有50个js文件，需要50个<script>标签。

困难

• 依赖手工，比如有50个JS文件...操作，过程繁琐
• 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
• 开发与生产环境一致，难以接入 TS 或 JS 新特性
• 比较难接入 Less、Sass 等工具
• JS、图片、CSS 资源管理模型不一致

出现了很多工程化工具

某种程度上正是这些工具的出现，才有了“前端工程”这一概念

Gulp	Vite	webpack	rollup.js	REQUIRE.JS	browserify

Webpack 的本质

本质上是一种前端资源编译、打包工具

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

Webpack 使用方法

1. 安装

npm i -D webpack webpack-cli

2. 编辑配置文件

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']
}]
}

3. 执行编译命令

npx webpack

核心流程 —— 极度简化版

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

递归调用2、3，直到所有资源处理完毕

模块化 + 一致性

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

使用 Webpack

关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：

• 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项

1. 声明入口 entry

module.exports = {
	entry: "./src/index"
};

2. 声明产物出口 output

const path = require("path");

module.exports = {
	entry: "./src/index",
	output: {
            filename: "[name].js",
            path: path.join(__dirname, "./dist"),
	}
};

3. 运行 npx webpack

使用 Webpack —— 处理 CSS

1. 安装 Loader

npm add -D css-loader style-loader

2. 添加 module 处理 css 文件

const path = require("path");

module.exports = {
	entry: "./src/index",
	output: {
		filename: "[name].js",
		path: path.join(__dirname, "./dist"),
	},
	module: {
		// css 处理器
		rules: [{
			test: /\.css/i,
			use: [
				"style-loader",
				"css-loader"
			],
		}],
	},
};

const styles = require('./index.css');
// or
import styles from './index.css'

人生到处知何似，应似飞鸿踏雪泥。