1.为什么需要打包工具
我们在开发时一般使用框架，vue，react，es6模块化，scss等，这样的代码要想在浏览器运行必须转成浏览器识别的js，css才能运行，所以这时候就需要webpack了。 除此之外，打包工具可以压缩代码，做兼容性处理，提升代码性能等。
2.打包工具分类
Grunt Gulp Webpack vite ........... 本篇文章主要写Webpack
3.webpack的使用
分为开发模式和生产模式 首先介绍webpack的简单使用
安装 webpack webpack-cli
代码语言：javascript复制npm i webpack -D
npm i webpack-cli -D编译
代码语言：javascript复制npx webpack ./main.js --mode=developmentwebpack就是将不能识别的语法编译成可以识别的语法，目前只能处理js资源。如何处理其他资源，需要进一步学习
webpack的5大核心概念
webpack基础配置
代码语言：javascript复制const path = require("path"); //nodejs核心模块，专门处理路径问题
module.exports = {
entry: "", //相对路径
output: {
path: , //绝对路径,开发模式无输出，所以写undefined
},
module: {},
plugins: [],
//开发服务器
mode: "development",
};处理样式资源
处理css资源
创建css文件夹，在文件夹下创建index.css,在main.js中引入import "./css/index.css"
代码语言：javascript复制.box {
display: flex;
width: 1000px;
height: 200px;
background:red
}安装css-loader
pnpm install --save-dev css-loader
安装style-loader
pnpm install style-loader
处理sass资源
创建sass文件夹，在文件夹下创建index.scss,在main.js中引入import "./sass/index.scss"
代码语言：javascript复制.box4 {
width: 20px;
height: 20px;
background: yellow;
}安装sass sass-loader
pnpm install sass sass-loader --save-dev
处理图片资源
webpack4处理图片资源通过file-loader和url-loader webpack5已经将两个loader的功能内置到webpack里，只需要简单配置即可处理图片资源
修改输出文件目录
代码语言：javascript复制output: {
path: path.resolve(__dirname, "dist"), //绝对路径
//入口文件打包输出的文件名
filename: "static/js/main.js",
},{
test: /.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
},
},
generator: {
//输出文件名称,10代表hash值只取前10位
filename: "static/images/[hash:10][ext][query]",
},
},自动清空上次打包内容
webpack4通过插件来自动清空上次打包结果，webpack5通过clean:true来自动清空, 原理：在打包前将path目录清空再进行打包
代码语言：javascript复制 output: {
path: path.resolve(__dirname, "dist"), //绝对路径
//入口文件打包输出的文件名
filename: "static/js/main.js",
clean:true //自动清空上次打包的结果
},处理字体图标问题
引入图标资源iconfont.css，引入字体资源fonts，配置webpack
代码语言：javascript复制{
test: /.(ttf|woff?2|)$/,
type: "asset/resource",
generator: {
//输出名称,10代表hash值只取前10位
filename: "static/media/[hash:10][ext][query]",
},
},处理其他资源
如视频音频，excel，word 在处理字体字体图标资源的对象里再加一些资源
代码语言：javascript复制test: /.(ttf|woff?2|mp3|mp4)$/,处理js资源
webpack对js的资源处理十分有限，只能编译es模块语法，针对js兼容性出来，利用babel
babel
介绍
js的编译器，将es6编写的代码转换为向后兼容的js语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
代码语言：javascript复制module.exports = {
presets:[] //预设，babel插件。扩展babel功能
}babel-loader
代码语言：javascript复制安装
pnpm i babel-loader -D
pnpm i @babel/core -D
pnpm install -D babel-preset-env处理js资源，通过babel-loader
代码语言：javascript复制{
test: /.js$/,
exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
loader: "babel-loader",
},创建babel.config.js
module.exports = {
// 智能预设：能够编译ES6语法
presets: ["@babel/preset-env"],
};处理html资源
代码语言：javascript复制安装
npm install --save-dev html-webpack-plugin在webpack.config.js引入
代码语言：javascript复制const HtmlWebpackPlugin = require('html-webpack-plugin');增加配置
代码语言：javascript复制 plugins: [
//以piblic/index.html文件创建新的html文件，
//新的html文件的特点 1.结构和原本的一直 2.自动引入打包输出的资源
new HtmlWebpackPlugin({ template: path.resolve(__dirname, "public/index.html") }),
],开发服务器和自动化
开发服务器不会输出资源，在内存中编译打包
代码语言：javascript复制安装webpack-dev-server
npm install -D webpack-dev-server配置
//开发服务器
devServer:{
host:"localhost", //启动服务器的域名
port:"3000", //启动服务器端口号
open:true, //是否自动打开浏览器
},启动指令变更npx webpack serve
4.生产模式相关配置
将生产模式的配置与开发模式的配置分开，创建文件夹config，将webpack.config.js移入到config，并改名webpack.dev.js，再建立webpack.prod.js，将webpack.dev.js的配置复制到webpack.prod.js
修改webpack.dev.js和webpack.prod.js中的绝对路径,并将mode改为production,去掉devServer
运行开发模式执行npx webpack serve --config ./config/webpack.dev.js
运行生产模式执行npx webpack --config ./config/webpack.prod.js
由于运行命令较长，故进行改造，修改package.json中的scripts
"scripts": {
"start":"npm run dev",
"dev": "webpack serve --config ./config/webpack.dev.js",
"build":"webpack --config ./config/webpack.prod.js"
},此时运行程序时使用npm start即可
提取css成单独文件
单独打包生成css，防止闪屏,
安装npm install --save-dev mini-css-extract-plugin
在webpack.prod.js引入 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 修改配置，将style-loader改为MiniCssExtractPlugin.loader（提取css为单独文件）
rules: [
{ test: /.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
],在plugins中调用
代码语言：javascript复制 plugins: [
new MiniCssExtractPlugin({filename:'static/css/main.css'})
],样式兼容性处理
安装包npm install postcss postcss-loader postcss-preset-env -D
增加配置，在css-loader后面，less-loader前面
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"], //解决大堆样式兼容性问题
},
},
},在package.json中增加
"browserslist":["last 2 version","> 1%","not dead"]
//所有浏览器最近的版本，覆盖99%浏览器以及不再使用的浏览器封装样式loader函数
样式重复代码抽取并进行封装
代码语言：javascript复制//获取处理样式的loader
function getStyleLoader(pre) {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"], //解决大堆事样式兼容性问题
},
},
},
pre,
].filter(Boolean); //若pre为undefined，直接过滤
}css压缩
代码语言：javascript复制npm install css-minimizer-webpack-plugin --save-dev引入
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");在plugins中使用
new CssMinimizerPlugin(),html压缩
配置生产模式，html和js默认压缩，不需要额外进行配置
