Webpark 介绍
官网
Webpack的功能
在现代前端开发中，我们会使用模块化、Sass、TypeScript、图片、字体等资源。但浏览器并不天然支持这些格式，因此我们需要工具将它们打包、转换成浏览器能识别的文件格式。Webpack 就是这样一个强大的前端构建工具。
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它会分析你的项目结构，找到 JavaScript 模块及其他资源（如 CSS、图片），将其打包为一个或多个 bundle 文件。
模块化？
模块化指的是将代码拆成功能单一的文件，每个文件内部维护自己的作用域与功能。
》》ES6 语法
我们通过 import 和 export 实现模块之间的引用与暴露：
Webpack 的核心组成结构
# Entry（入口） Webpack 构建的起点，告诉它从哪里开始分析依赖。
# Output（输出） Webpack 打包后的输出文件路径与文件名。
# Loader（模块转换器）Webpack 默认只能识别 JS 文件。Loader 让 Webpack 能够处理非 JS 文件，如 CSS、图片等，把它们转成 JS 模块。
# Plugin（插件）增强 Webpack 功能的机制，例如自动生成 HTML 文件、提取 CSS、压缩优化代码等。
# Mode（模式）development：开发模式，包含调试信息，不压缩代码。production：生产模式，自动压缩优化。
##############################上面是Webpack 五个核心 #####################################################
# DevServer（开发服务器）Webpack 内建的本地开发服务器，支持热更新（HMR）、自动刷新、快速预览。
# SourceMap映射压缩后的代码到源码位置，方便调试。项目结构
webpack-demo/
├─ src/
│ └─ index.js
├─ dist/
│ └─ index.html
├─ webpack.config.js
└─ package.jsonWebpack 5 的 HMR（热模块替换）
默认支持：Webpack 5 对开发模式（mode: ‘development’）默认开启 HMR
默认 style-loader 支持 热模块替换的，js是不支持，需要手动配置
//在入口 index.js 中
//判断是否支持热模块替换功能
if(module.hot)
{module.hot.accept('./xxx.js')module.hot.accept('./yyy.js')
}module.exports = {mode: 'development',devServer: {hot: true, // 开启 HMR},
};Webpack 5 的 Tree Shaking（摇树优化）
css-loader style-loader
file-loader、url-loader
官网常用loader
是因为css-loader只负责加载css文件，不负责解析，如果要将样式解析到dom元素中需要使用style-loader。
常用loader
**babel-loader：**将ES6+代码转换为ES5语法，以便在旧版本的浏览器中运行。
**style-loader 和 css-loader：**用于处理CSS文件。css-loader主要负责处理样式文件中的import和url语句，而style-loader将转换后的CSS模块直接注入到HTML页面中。
**file-loader 和 url-loader：**用于处理图片和其他资源文件。file-loader会为每一个文件生成一个对应的文件，而url-loader将小于设定大小的文件转换为base64编码的URL，减少HTTP请求。
**sass-loader 和 less-loader：**用于处理Sass和Less预处理器。它们将Sass和Less代码转换为普通的CSS代码。
**postcss-loader、postcss-preset-env：**用于为CSS3代码添加浏览器兼容性前缀，以确保在不同浏览器上的一致性。
**html-loader：**用于处理HTML文件，将其中的图片等资源转换为Webpack可以识别的模块。
这只是一些常用的Webpack loader，实际上还有很多其他的loader可以根据具体的需求进行选择和配置。使用适当的loader可以提高开发效率并优化最终打包结果
loader 匹配机制
module: {rules: [{test: /\.css$/, // 匹配所有的css文件use: ["style-loader", "css-loader"], // 注意顺序！从右向左执行（即先加载css-loader，再加载style-loader）},{test: /\.less$/,use: ["style-loader","css-loader","less-loader",{loader: "postcss-loader",options: 
