Webpack5 入门学习笔记（上）：处理图片字体等资源

5 大核心概念

  1. entry（入口），指示 Webpack 从哪个文件开始打包

  2. output（输出），指示 Webpack 打包完的文件输出到哪里去，如何命名等

  3. loader（加载器），webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

  4. plugins（插件）扩展 Webpack 的功能

  5. mode（模式），development 和 production

准备在项目根目录下创建配置文件：webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范
运行指令 npx webpack
面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式

开发模式介绍

开发模式顾名思义就是开发代码时使用的模式。

这个模式下主要做两件事：

  1. 编译代码，使浏览器能识别运行

开发时有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以要加载配置来编译这些资源

  1. 代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

处理样式资源：Css、Less、Sass、Scss、Styl

介绍

Webpack 本身是不能识别样式资源的，所以需要借助 Loader 来帮助 Webpack 解析样式资源。找 Loader 都应该去官方文档中找到对应的 Loader，然后使用官方文档(https://webpack.docschina.org/loaders/)找不到的话，可以从社区 Github 中搜索查询。

处理 Css 资源

1. 下载包，需要下载两个 loader

1
npm i css-loader style-loader -D

2. 功能介绍

  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

3. 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

添加 Css 资源 然后运行查看效果

处理 Less 资源

  1. 下载包 npm i less-loader -D
  • less-loader：负责将 Less 文件编译成 Css 文件
  1. 配置
    在 module rules 数组里添加如下对象
    1
    2
    3
    4
    {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
    },
  2. 添加less资源，然后运行指令查看效果

处理 Sass 和 Scss资源

  1. 下载包 npm i sass-loader sass -D
  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译
  1. 配置，在 module rules 数组里添加如下对象
1
2
3
4
{
    test: /\.s[ac]ss$/,
    use: ["style-loader", "css-loader", "sass-loader"],
},
  1. 添加 Sass 资源，然后运行指令查看效果

处理 Styl 资源

  1. 下载包 npm i stylus-loader -D
  • stylus-loader：负责将 Styl 文件编译成 Css 文件
  1. 配置，在 module rules 数组里添加如下对象
1
2
3
4
{
    test: /\.s[ac]ss$/,
    use: ["style-loader", "css-loader", "sass-loader"],
},
  1. 添加 Styl 资源，然后运行指令查看效果

处理图片资源

Webpack4 是通过 file-loader 和 url-loader 进行处理的。 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，只需简单配置即可使用。

  1. 配置
1
2
3
4
{
    test: /\.(png|jpe?g|gif|webp)$/,
    type: "asset",
},
  1. 添加图片资源
  • src/images/1.jpeg
  • src/images/2.png
  • src/images/3.gif
  1. 使用图片资源
  • src/less/index.less
1
2
3
4
5
6
.box2 {
  width: 100px;
  height: 100px;
  background-image: url("../images/1.jpeg");
  background-size: cover;
}
  • src/sass/index.sass
1
2
3
4
5
.box3
  width: 100px
  height: 100px
  background-image: url("../images/2.png")
  background-size: cover
  • src/styl/index.styl
1
2
3
4
5
.box5
  width 100px
  height 100px
  background-image url("../images/3.gif")
  background-size cover
  1. 运行指令后查看资源输出情况

此时如果查看 dist 目录的话，会发现多了三张图片资源。因为 Webpack 会将所有打包好的资源输出到 dist 目录下。为什么样式资源没有呢？因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来。

  1. 对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式（Base64 格式）, 优点是减少请求数量，缺点是体积变得更大。

1
2
3
4
5
6
7
8
9
{
      test: /\.(png|jpe?g|gif|webp)$/,
      type: "asset",
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
        }
      }
    },

此时输出的图片文件就只有两张，有一张图片以 data URI 形式内置到 js 中了
（注意：需要将上次打包生成的文件清空，再重新打包才有效果）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中

{
    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]",
    },
},

自动清空打包上次的资源

1
2
3
4
5
output: {
   path: path.resolve(__dirname, "dist"),
   filename: "static/js/main.js",
   clean: true, // 自动将上次打包目录资源清空
 },

处理字体图标资源

  1. 从阿里巴巴矢量图标库下载字体图标文件
  2. 添加字体图标资源

  • src/fonts/iconfont.ttf

  • src/fonts/iconfont.woff

  • src/fonts/iconfont.woff2

  • src/css/iconfont.css
    注意修改字体文件的路径

  1. 在js中引入资源，在html中使用资源
    1
    2
    3
    4
    <!-- 使用字体图标 -->
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
  2. 配置然后执行指令
1
2
3
4
5
6
7
{
    test: /\.(ttf|woff2?)$/,
    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 形式

处理其他音频视频资源

配置：在上一步的规则匹配上修改 

1
2
3
4
5
6
7
{
    test: /\.(ttf|woff2?|map4|map3|avi)$/,
    type: "asset/resource",
    generator: {
        filename: "static/media/[hash:8][ext][query]",
    },
},