一 前言

（1）为什么需要打包工具?

开发时，我们会使用框架(React. Vue) ，ES6 模块化语法，Less/Sass 等css预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、Css 等语法，才能运行。所以我们需要打包工具帮我们做完这些事。
 除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。
（2）有哪些打包工具?
       ●Grunt
       ●Gulp
      ●Parcel
      ●Webpack
      ●Rollup
      ●Vite

         .....

二 基本使用

1.Webpack是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。
输出的文件就是编译好的文件，就可以在浏览器段运行了。
我们将Webpack 输出的文件叫做bundle 。

2.Webpack本身功能是有限的:
●开发模式:仅能编译JS中的ES Module 语法
●生产模式:能编译JS中的ES Module 语法，还能压缩JS代码

3.下载依赖
打开终端，来到项目根目录。运行以下指令: .
●初始化package.json

npm init -y

此时会生成一个基础的package.json 文件。
需要注意的是package.json 中name字段不能叫做webpack , 否则下一步会报错
●下载依赖

npm i webpack webpack-cli -D

4.启用Webpacks
●开发模式

npx webpack ./src/main.js --mode=development

 ●生产模式

npx webpack ./src/main.js --mode=production

npx webpack : 是用来运行本地安装Webpack 包的。
./src/main.js :指定Webpack 从main.js 文件开始打包，不但会打包main.js,还会将依赖也一起打包进来。

5. 观察输出文件

默认webpack 会将文件打包输出到dist 目录下，我们查看dist 目录下文件情况就好了

小结
Webpack本身功能比较少，只能处理js资源， 一旦遇到css等其他资源就会报错。所以我们学习Webpack ，就是主要学习如何处理其他资源。

三 配置

五大核心概念

1. entry (入口)
指示Webpack从哪个文件开始打包
2. output (输出)
指示Webpack打包完的文件输出到哪里去，如何命名等
3. loader (加载器)
webpack本身只能处理js、json 等资源，其他资源需要借助loader, Webpack 才能解析
4. plugins (插件)
扩展Webpack的功能
5. mode (模式)
主要由两种模式:
●开发模式: development
●生产模式: production
 

准备Webpack配置文件

在项目根目录下创建webpack.config.js

const path=require("path")//nodejs核心模块， 专门用来处理路径问题
module.exports={
  //入口
  entry:"./src/main.js",//相对路径
  //输出
  output:{
    //文件的输出路径
     //__dirname nodejs的变量，代表当前文件的文件夹目录
    path:path.resolve(__dirname,"dist"),//绝对路径
   //文件名
    filename:"main.js",
  },
  //加载器
  module:{
    rules:[
        //loader的配置
    ]
  },
  //插件
  plugins:[
    //plugin的配置
  ],
  //模式
  mode:"development"
}

四 开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事:
1.编译代码，使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等, webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
2.代码质量检查，树立代码规范
提前检查代码的一些隐患,让代码运行时能更加健壮。
提前检查代码规范和格式，统-团队编码风格,让代码更优雅美观。

五 处理样式资源

Webpack本身是不能识别样式资源的，所以我们需要借助Loader来帮助Webpack解析样式资源
我们找Loader都应该去官方文档中找到对应的Loader,然后使用

（1）处理css资源

1 下载包（通常webpack.config.js中use配置了几个loader就要下载几个loader）

npm i css-loader style-loader -D

2 main.js引入css文件

import  "./css/index.css"

3 webpack.config.js配置

module.exports = {
...
  module: {
    rules: [
     {
            test: /\.css$/,//只检测css文件
            use: [ //执行顺序，从右到左(从下到上)
                'style-loader',//将js中css通过创建style标签添加到html文件中生效
                 'css-loader' ,//将css资源编译成commonjs的模块到js中
                ]
          }
    ]
  }
...
}

（2)处理less资源

功能介绍
●less-loader :负责将less文件编译成css文件

1 下载包

npm i  less less-loader -D

2  main.js引入css文件

import "./less/index.less"

3 webpack.config.js配置

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{//use可以使用多个loader
                loader: "style-loader" //loader:'xxx' 只能使用一个loader
            }, {
                loader: "css-loader" 
            }, {
                loader: "less-loader" 
            }]
        }]
    }
...
};

（3）处理Sass和Scss资源

功能介绍
●sass-loader :负责将Sass文件编译成css文件
●sass : sass-loader 依赖sass进行编译

1 下载包

npm i sass-loader sass -D

2 main.js引入sass/scss文件

import "./sass/index.sass";
import "./sass/index.scss";

3 webpack.config.js配置

module.exports = {
  ...
  module: {
    rules: [{
     test: /\.s[a,c]ss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }]
  }
...
};

(4)处理Styl资源

功能介绍:stylus-loader :负责将Styl文件编译成Css文件

1 下载包

npm i stylus-loader -D

2 引入

import "./stylus/index.styl";

3 webpack.config.ja配置

const path=require("path")//nodejs核心模块， 专门用来处理路径问题
 
module.exports={
  ...
  module:{
    rules:[
     
        {
             test:/\.styl$/,
             use:[
                "style-loader",
                "css-loader",
                "stylus-loader"
             ]
        }
    ]
  },
  ...
}

六 处理图片资源

1 配置

const path = require("path");
 
module.exports = {
 ...
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
...
};

2 对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式（Base64 格式）

在webpack官网找

const path = require("path");
 
module.exports = {
 ...
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
...
};

优点：减少请求数量

缺点：体积变得更大 

七修改输出资源的路径和名称

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中

    clean:true,//自动将上次打包资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};
 

2 修改index.html

 
   
   
   
   
 
 
         .....
   
   
 
           

3 运行指令

npx webpack

八 处理字体图标资源

（1）下载字体图标文件
1.打开阿里巴巴矢图标库（iconfont-阿里巴巴矢量图标库）
2.选择想要的图标添加到购物车,统一-下载到本地

 （2）添加字体图标资源

入口文件（src/main.js)添加

// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";

public/index.html

 
   
   
   
   
 
 
   

Hello Webpack5

   

   

   

   

   

   
   
   
   
   
 

(3)配置

const path = require("path");

module.exports = {
  ...

rules:[
      {
        test: /\.(ttf|woff2?)$/,

    //处理其他资源：test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
....
};

type: "asset/resource"和type: "asset"的区别：

1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

(4)运行指令

npx webpack