一、打包CSS代码
由于Webpack默认只识别js代码，所以打包css代码需要其他一些东西来帮忙
加载器css-loader：解析css代码
加载器style-loader：把解析后的css代码插入到DOM
步骤：
1.准备css文件代码引入到src/login/index.js中（压缩转译处理等）
2.下载css-loader和style-loader本地软件包
3.配置webpack.config.js让Webpack拥有该加载器功能
4.打包后观察效果
二、优化-提取css代码
插件mini-css-extract-plugin：提取css代码
步骤：
1.下载mini-css-extract-plugin本地软件包
2.配置webpack.config.js让Webpack拥有该插件功能
3.打包后观察效果
注意：不能和sty-loader一起使用
好处：css文件可以被浏览器缓存，减少js文件体积
/**
* 目标6：优化-提取 css 代码到单独的 css 文件中
* 6.1 下载 mini-css-extract-plugin 本地软件包
* 6.2 配置 webpack.config.js 让 Webpack 拥有该插件功能
* 6.3 打包后观察效果
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
//入口
entry: path.resolve(__dirname, 'src/login/index.js'),
//出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true //生成打包后内容之前，清空输出目录
},
//插件
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/login.html'),//模板文件
filename: path.resolve(__dirname, 'dist/login/index.html')//输出文件
}),
new MiniCssExtractPlugin()//生成CSS文件
],
//加载器（让webpack 识别更多模块文件内容）
module: {
rules: [
{
test: /\.css$/i,
// use: ['style-loader', 'css-loader'],
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
],
},
};三、优化-压缩过程
问题：css代码提取后没有压缩
解决：使用css-minimizer-webpack-plugin插件
步骤：
1.下载css-minimizer-webpack-plugin本地软件包
2.配置webpack.config.js让webpack拥有该功能
3.打包重新观察
/**
* 目标7：优化-压缩 css 代码
* 7.1 下载 css-minimizer-webpack-plugin 本地软件包
* 7.2 配置 webpack.config.js 让 Webpack 拥有该插件功能
* 7.3 打包后观察效果
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
//入口
entry: path.resolve(__dirname, 'src/login/index.js'),
//出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true //生成打包后内容之前，清空输出目录
},
//插件
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/login.html'),//模板文件
filename: path.resolve(__dirname, 'dist/login/index.html')//输出文件
}),
new MiniCssExtractPlugin()//生成CSS文件
],
//加载器（让webpack 识别更多模块文件内容）
module: {
rules: [
{
test: /\.css$/i,
// use: ['style-loader', 'css-loader'],
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
],
},
//优化
optimization: {
//最小化
minimizer: [
// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
`...`,
new CssMinimizerPlugin(),
],
},
};四、打包less代码
加载器less-loader:把less代码编译为css代码
步骤：
1.新建less代码（设置背景图）并引入到src/login/index.js中
2.下载less和less-loader本地软件包
3.配置webpack.config.js让Webpack软件包使用
注意：less-loader需要配合less软件包使用
/**
* 目标8：打包 less 代码
* 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
* 8.2 下载 less 和 less-loader 本地软件包
* 8.3 配置 webpack.config.js 让 Webpack 拥有功能
* 8.4 打包后观察效果
*/
// 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
//入口
entry: path.resolve(__dirname, 'src/login/index.js'),
//出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: './login/index.js',
clean: true //生成打包后内容之前，清空输出目录
},
//插件
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/login.html'),//模板文件
filename: path.resolve(__dirname, 'dist/login/index.html')//输出文件
}),
new MiniCssExtractPlugin()//生成CSS文件
],
//加载器（让webpack 识别更多模块文件内容）
module: {
rules: [
{
test: /\.css$/i,
// use: ['style-loader', 'css-loader'],
use: [MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /\.less$/i,
use: [
// compiles Less to CSS
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
//优化
optimization: {
//最小化
minimizer: [
// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
`...`,
new CssMinimizerPlugin(),
],
},
};五、打包图片
资源模块：Webpack5内置资源模块（字体，图片等）打包，无需额外loader
步骤：
1.配置webpack.config.js让Webpack拥有打包图片功能
占位符【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串
占位符【ext】使用当前模块原本的占位符，例如：.png/.jppg等字符串
占位符【query】保留引入文件时代码中查询参数（只用URL下生效）
2.打包后观察效果和区别
注意：判断临界值默认为8KB
大于8KB文件：发送一个单独的文件并导出URL地址
小于8KB文件：导出一个data URL(base64字符串）
