Webpack——04——打包其他资源_webpack 处理其他资源-CSDN博客

本文链接：https://blog.csdn.net/x1037490413/article/details/110206281

其他资源就是不用做任何处理，原封不动输出出去就可以了
我们先用图标库来举例，先去阿里巴巴矢量库下载几个，我们用font-class举例
先将iconfont.css复制到src文件夹中，并在入口Index.js中引入它，其他的四种格式的文件也要复制到文件夹中
在这里插入图片描述
我们要打包的是css资源（iconfont.css）,html资源（index.html）和字体图标资源
注意！！！！！！！必须style-loader在前面，css-loader在后面，我放错了顺序报错了

代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <span class="iconfont icon-quanxian"></span>
    <span class="iconfont icon-shangpin"></span>
    <span class="iconfont icon-yonghu"></span>
    <span class="iconfont icon-shujutongji"></span>
</body>
</html>

index.js

//引入iconfont样式文件
import './iconfont.css'

webpack.config.js

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:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
   //打包其他资源（除了html/js/css）资源以外的资源 如果还有别的资源，也加在排除里面
   //可以不写test，用exclude排除这些以外的资源
  //打包其他资源统一用file-loader处理
   //缩短文件名
   exclude:/\.(css|html|js)$/,
   loader:'file-loader',
   options:{
     name:'[hash:10].[ext]'
   }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'
    })
  ],
  mode:"development",
}

在这里插入图片描述