webpack
为什么?
把静态模块内容，压缩，整合，转译等(前端工程化)
- 把less/sass转成css代码
- 把ES6+ 降级成ES5
- 支持多种模块文件类型，多种模块标准语法
vite
为什么不直接学习vite 而学习webpack
因为很多项目还是基于webpack来进行构建的，所以还要掌握webpack
案例：封装utils包，校验用户名和密码长度 ，在index.js种使用，使用webpack打包
步骤：
1.新建项目文件夹，初始化包环境
2.新建src源代码文件夹(书写代码)
3.下载webpack webpack-cli 到项目(版本独立)
4.项目种允许工具命令，采用自定义命令的方式(局部命令)
5.自动产生dist分支文件夹(压缩和优化后，用于最终运行的代码)
总结：
在package.json中自定义命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
如何运行package.json 里的自定义命令
npm run 自定义命令
修改webpack打包入口和出口
步骤:
1.项目根目录，新建webpack.config.js配置文件
2.导出配置对象，配置入口，出口文件路径
//webpack.config.js
const path = require('path')
module.exports={
// 入口
entry:path.resolve(__dirname,'src/main.js'),
// 出口 path 路径 filename 文件名
output:{
path:path.resolve(__dirname,'dist'),
filename:'my-first-webpack.bundle.js'
}
}
自动生成html文件
HtmlWebpackPlugin 简化了 HTML 文件的创建
步骤:
1.下载本地软件包
2.配置webpack.config.js让webpack拥有插件的功能
3.指定以public/index.html为模板复制到dist/index.html ,并自动引入其他打包后资源
plugins:[new HtmlWebpackPlugin({
// 以指定的html文件为生成模板
template:path.resolve(__dirname,'public/index.html')
})]
打包css模块
注意:webpack默认只识别js和json文件内容
加载器 css-loader 解析css代码
加载器style-loader 把解析后的css代码插入到DOM
步骤:
1.准备css文件导入到src/main.js中 (压缩转移处理)
2.下载css-loader 和style-loader本地软件包
3.配置webpack.config.js 让webpack拥有该加载器功能
4.打包后运行dist/index.html
打包less模块
加载器 less-loader 把less代码编译为css代码，还需要依赖less软件包
步骤:
1.准备less样式导入到src/main.js中 (压缩转移处理)
2.下载less 和less-loader本地软件包
3.配置webpack.config.js 让webpack拥有该加载器功能
4.打包后运行dist/index.html
打包图片
webpack5 内置了资源模块的打包，无需下载额外的loader
步骤:
1.准备图片素材到src/assets中
2.在index.less中给body添加背景图
3.在main.js中给img标签添加logo图片
4.配置webpack.config.js 让webpack拥有该加载器功能
5.打包后运行dist/index.html
集成babel编译器
babel编译器：是一个JavaScript的语法编译器，采用ECMAScript 2015+ 语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中
babel-loader 让webpack可以使用babel转译JavaScript代码
npm install -D babel-loader @babel/core @babel/preset-env
步骤：
1.编写一段映射数组元素，每个数值 +1 代码 (箭头函数)
2.下载babel babel-loader core 本地软件包
3.配置webpack.config.js 让webpack拥有该加载器功能
4.打包后运行dist/index.html
webpack开发服务器
webpack-dev-server 快速开发应用程序
作用:启动web服务，打包输出源码在内存，并检测代码变化热更新到网页
步骤：
1.下载webpack-dev-server 软件包到当前项目
2.配置自定义命令，并设置打包的模式为开发模式
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev":"webpack serve --mode=development"
},
3.使用npm run dev 启动开发服务器，热更新效果
打包模式
告知webpack使用相应模式的内置优化
分类：
| 模式名称 | 模式名字 | 特点 |
|---|---|---|
| 开发模式 | development | 调式代码，实时加载，模块热替换等 |
| 生产模式 | production | 压缩代码，资源优化，更轻量 |
设置：
方式1：在webpack.config.js配置文件设置mode选项
module.exports={
mode:'production'
}
方法2： 在package.json命令行设置mode参数
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production",
"dev":"webpack serve --mode=development"
},
开发环境调错
sourcemap 可以准确追踪error和warning 在原始代码的位置
问题:代码被压缩和混淆，无法正确定位源代码位置(行数和列数)
设置:webpack.config.js 配置devtool选项
inline-source-map选项：把源码的位置信息一起打包在js文件内
注意:source map仅适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）
解析别名alias
解析别名：配置模块如何解析，创建import 或require的别名，来确保模块引入变得更简单
原来路径
import {checkuser,checkpwd} from '../src/utils/check.js'
变成
import {checkuser,checkpwd} from '@/utils/check.js'
配置解析别名:在webpack.config.js中设置