7 --- ＞ webpack打包其他资源

最新推荐文章于 2025-12-19 00:15:05 发布

原创最新推荐文章于 2025-12-19 00:15:05 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文介绍如何在Webpack中配置处理非代码资源如字体文件的方法，并详细解释了具体步骤及配置示例。

其他资源：不需要任何处理，原封不动的输出，也不需要做优化、压缩等等
比如：字体

1.前往https://www.iconfont.cn/选择图标
2.购物车中下载代码
3.将字体文件引入到src下面
在这里插入图片描述

其中引入ttf是因为查看iconfont.css中引入了ttf文件

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1625729950853') format('truetype');
}

配置打包文件

/*
 * @Author: zyl
 * @Date: 2021-06-24 10:01:07
 * @LastEditors: zyl
 * @LastEditTime: 2021-07-08 15:59:21
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        //use使用数组是需要多个loader处理
        use: [
          'style-loader',
          'css-loader',
        ]
      },
      {
        //打包除开html\css\js之外的文件
        exclude: /\.(css||js||html)$/,
        //处理html文件的img图片(负责引入img，从而能够被url-loader进行处理)
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })

  ],
  mode: 'development'
}

其中的关于打包其他资源的配置在module的rules里面

{
        //打包除开html\css\js之外的文件
        exclude: /\.(css||js||html)$/,
        //处理html文件的img图片(负责引入img，从而能够被url-loader进行处理)
        loader: 'file-loader'
      }

使用exclude排除开html、css、js文件