webpack》》

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.json

Webpack 5 的 HMR（热模块替换）

默认支持：Webpack 5 对开发模式（mode: ‘development’）默认开启 HMR

module.exports = {
   
   
  mode: 'development',
  devServer: {
   
   
    hot: true, // 开启 HMR
  },
};

Webpack 5 的 Tree Shaking（摇树优化）

css-loader style-loader

file-loader、url-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可以提高开发效率并优化最终打包结果

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: {
   
   
            postcssOptions: {
   
   
              plugins: [require("postcss-preset-env")],