webpack成长指北第9章---webpack如何对icon字体进行打包

最新推荐文章于 2024-02-21 11:21:06 发布

Boale_H

最新推荐文章于 2024-02-21 11:21:06 发布

阅读量393

点赞数

分类专栏：项目框架搭建文章标签： javascript 前端 webpack

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/Boale_H/article/details/107458432

版权

项目框架搭建专栏收录该内容

31 篇文章 0 订阅

订阅专栏

webpack成长指北第9章---webpack如何对icon字体进行打包

前言
下载icon图标
项目目录
项目代码

前言

在项目中，我们有时候会引入icon字体来实现一些图标的展示，但是之前文章有说过，webpack只识别js文件，那么如何对eot,ttf,svg,woff,woff2等类型的icon字体文件进行打包呢？

下载icon图标

我们可以先去阿里巴巴矢量图标库中下载所需要的icon图标
在这里插入图片描述

下载完成后获得这些文件

项目目录

在这里插入图片描述

项目代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解决没有favicon.ico时报错GET http://localhost:9999/favicon.ico 404 (Not Found) -->
  <link rel="shortcut icon" href="#" />
  <link type="text/css" rel="styleSheet" href="./dist/css//main.css" />
  <title>webpack学习</title>
</head>
<body>
  <div>这是webpack学习</div>
  <div id="root"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

将下好的icon图标文件放到项目中
修改iconfont.css,将起文件引入改为相对路径

index.js模块中引入iconfont.css

import './src/assets/icon/iconfont.css';

const dom = document.getElementById('root');
const iconBox = document.createElement('div');
iconBox.className = 'iconfont icon-dianshita'
dom.append(iconBox);

安装依赖
之前我们说过，webpack默认只识别js文件，如果要处理css,以及eot,ttf,svg,woff,woff2等类型的icon字体文件，就需要考虑使用loader来处理这些文件
其实打包字体文件和打包图片类似，我们需要安装file-loader和url-loader
```
npm i file-loader url-loader -D
```

配置webpack

const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // webpack默认是将css打包到js中,如果需要将css打包成单独文件，则需要引入它

module.exports = {
  entry: {
    main: './index.js', // 指定当前目录的index.js为打包的入口文件
                       // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name
  },
  mode: 'development', // mode  指定打包模式（development（不会被压缩），production（这个模式的话代码会被压缩））
                       // development默认配置了sourcemap
                       // development默认无tree shaking配置，需要额外配置
  plugins: [
    new MiniCssExtractPlugin({   // 如果需要将css打包成单独文件，则需要引入它
      filename: './css/main.css', // 非必填，默认当前目录main.css，如指定路径和文件名可这样填写
      chunkFilename: '[id].css',  // 间接引入css的才会走chunk.filename
    }),
  ],
  module: {
    rules: [
      // 将css打包成单独文件
      {
        test:/\.css$/,
        use:[
            // 'style-loader',  // mini-css-extract-plugin是将css打包成独立的文件，而style-loader是将css以<style>标签的方式插入样式，彼此存在冲突,所以需要注释掉。
            // 'css-loader'     //将 CSS 转化成 CommonJS 模块
            // MiniCssExtractPlugin.loader, // mini-css-extract-plugin是将css打包成独立的文件的插件
            {
              loader: MiniCssExtractPlugin.loader, // mini-css-extract-plugin是将css打包成独立的文件的插件
              options: {
                publicPath: '../../' // 设置publicPath，这样css引用的背景图url就会以css所在的文件为基础
              }
            },
            {
              loader: 'css-loader', //将 CSS 转化成 CommonJS 模块
              options: {
                import: true, // 启用/禁用 @import 处理
                // modules: true // 代表样式的模块化打包，即哪个js引入了样式，哪个js才会受这个样式作用，其他js不受此样式文件影响
                              // 但是这样会造成样式文件打包后，类名会变成hash值，造成样式不起作用，因此如果设置modules: true，组件中设置类名的方式则需要做调整，根据css文件类名的变化而变化
              }
            },
            'postcss-loader'  // 在css3新特性下，我们是要添加浏览器厂商前缀的。如果没有浏览器厂商前缀，同一套样式不同浏览器展现的样式是不同的。
        ]
      },

      // 打包iconfont字体图标，和打包图片类似
      {
        test:/\.(eot|ttf|svg|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            esModule: false, // 新版本中esModule默认为true，会导致文件的地址变为[object Module],因此这里设置为false
            name: '[name]_[hash].[ext]', // 输出的文件名为[原名称]_[哈希值].[原后缀]
            outputPath: 'fonts/',       // 文件存储路径（output.path + 值）（物理路径, 存储路径）
                                        // 负责输出目录, 即打包后的写在磁盘的位置
            // publicPath: 'dist/fonts/',   // 输出解析文件的目录，url 相对于 HTML 页面（index.html所在文件夹的绝对路径 + 值）（文件引用路径就是看这个）
            //                             // 如果output设置了publicPath， options也设置了publicPath，优先以options的publicPath为主
            //                             // 是对页面引入资源的补充,比如img标签引入或者css引入等.
            //                             // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
                                          // 一般只设置output的publicPath，方便统一管理
            limit: 1024                 // 限制当文件小于1KB的时候，就将文件转为base64存储于js中，以减少http请求次数，当文件大于1KB，则打包文件到指定目录，避免js过大
          }
        }
      },
    ]
  },
  output: {
    filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename）
    path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下
                                           // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径
                                           // 整体路径为第一个参数+第二个参数，即__dirname + dist
                                           // 是所有输出文件的目标路径（物理路径, 存储路径）;                  
    publicPath: 'dist/'   // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath，
                          // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath
                          // （文件引用路径就是看这个）
                          // 是对页面引入资源的补充,比如img标签引入或者css引入等.
                          // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件
  }
}

package.json

{
  "name": "09_webpack_icon",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack"
  },
  "keywords": [],
  "author": "Boale_H",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.8.4",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "less": "^3.11.3",
    "less-loader": "^6.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^9.0.1",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}