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

一、本堂课的重点内容

1、什么是Webpack

二、知识点介绍

1.1前端项目由什么构成 --资源

PNG,JPG,GIF,WEBR,JS,TS,css,Less,Vue,JSX,Sass···· 因为有依赖手工操作过程繁琐等问题，对开发效率影响非常大，所以出现了很多工程化工具，比如webpack,vite,rollup.js···

1.2什么是webpack

本质上是一种前端资源编译，打包工具
多份资源文件打包成一个Bundle
支持 Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理 css、图片等资源文件
支持 HMR + 开发服务器支持持续监听、持续构建支持代码分离
支持 Tree-shaking支持 Sourcemap

2.1 使用webpack

安装-编辑配置文件-执行编译命令

//安装

1 npm i -D webpack webpack-cli

//编辑配置文件
module.exports-{
entry: 'main.is',
output:{
fllename: '[name].js',
path: path.jain(__dirname, "./dist"),
},
module:{ 
rules:[{
test:/\.less$/i.
use:['style-laader',"css-loader". "less-loader"]
}]
}

//执行编译命令
1 npx webpack

2.2核心流程 --极度简化版

1、入口处理
2、依赖解析 3、资源解析 4、资源合并打包

2.3模块化+一致性

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

2.4 怎么使用webpack?

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
流程类：作用于流程中某个 or若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项
流程类配置：输入entry``context，模块解析resolve,externals，模块转译module，后处理optimization,mode,target
声明入口：

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

声明产物出口：

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

Webpack知识体系|青训营笔记5