初识Webpack | 青训营笔记

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

Webpack 是什么？有什么用？

一句话概括：webpack是用于在前端项目中更加高效地管理和维护各种资源的一个工具。

Webpack上手

通过npm安装webpack
npm i -D webpack webpack-cli
运行命令
npx webpack
文件结构
|- src
| - index.js
|- webpack.config.js

核心流程

Webpack配置文件

webpack的使用基本上围绕着“配置”展开，配置大致可以分为以下两类：
流程类： 作用于流程中的某个或若干个环节，直接影响打包效果的配置项

工具类： 主流程之外，提供更多工程化能力的配置项

webpack.config.js 配置文件

const path = require("path");
module.exports = {
	// 模式
	mode: "development",
	// 入口起点
	entry: "./src/index.js",
	// 输出
	output: {
		// 输出文件名
		filename: "built.js",
		// 输出路径 __dirname代表当前文件目录的绝对路径
		path: path.resolve(__dirname, "dist"),
	},
	// loader的配置
	module: {
		rules: [],
	},
	// plugins的配置
	plugins: [		
	],
};

• mode：打包模式，可选值有production、development、none
• entry：入口文件，即需要被打包的js文件
• output：输出文件，filename指定输出的文件名，path指定输出路径
• module：使用Loader时的配置项
• plugins：使用插件时的配置项

使用Loader

Loader的作用
使得webpack能够处理更多不同类型的资源文件。

举个例子：打包css和less样式文件
安装合适的loader包 npm i css-loader style-loader less less-loader -D

// webpack.config.js

const path = require("path");
module.exports = {
	mode: "development",
	entry: "./src/index.js",
	output: {
		filename: "main.js",
		path: path.resolve(__dirname, "dist"),
	},
	module: {
		rules: [
			// 详细的loader配置
			{
				// 匹配哪些文件
				test: /\.css$/,
				// 使用哪些loader进行处理
				use: [
					// use数组里的loader是从下到上（逆序）执行的
					"style-loader", // 将js的样式内容插入到style标签里，添加到head中生效
					"css-loader", // 将css文件变成commonJs模块加载到js中，里面的内容是样式字符串
				],
			},
			{
				test: /\.less$/,
				use: [
					"style-loader",
					"css-loader",
					"less-loader", //需要下载less-loader和less包
				],
			},

			// 写法二：use数组里面也可以配置对象
			/*
			{
				test: /\.css$/,
				use: [
					{
						loader: 'css-loader',
						options: '传递给loader的参数'
					}
				],
			},
			*/

			// 写法三：直接写loader（只能写一个且不能配置参数）
			/*
			{
				test: /\.css$/,
				loader: 'css-loader'
			}
			*/
		],
	},
};

使用插件plugins

plugin的作用
其实webpack本身的很多功能都是基于插件实现的，并且插件可以拓展webpack的能力，让这个工具使用起来更加高效便捷。 举个例子：自动生成html文件
安装html-webpack-plugin
npm i html-webpack-plugin -D

// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入

module.exports = {
	mode: "development",
	entry: "./src/index.js",
	output: {
		filename: "built.js",
		path: path.resolve(__dirname, "dist"),
	},
	// loader的配置
	module: {
		rules: [],
	},
	// plugins的配置
	plugins: [
		// html-webpack-plugin
		// 功能：new HtmlWebpackPlugin()默认创建一个空的HTML文件，自动引入打包输出好的所有资源（JS、CSS）
		// 需求：需要有结构的HTML文件
		new HtmlWebpackPlugin({
			template: "./src/index.html", // 配置：复制指定的html文件
		}),
		// 也可以自定义标题、meta标签，并且通过指定filename属性输出更多的html文件（默认输出的是index.html）
		new HtmlWebpackPlugin({
			filename: "about.html",
			title: "Hello Webpack",
			meta: {
				viewport: "width=device-width",
			},
		}),
	],
};

理解插件
插件围绕着“钩子”展开，钩子的核心信息:

• 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情
• 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
• 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变