解析图片和字体

解析图片和字体都使用file-loader，都只需要在rules中增加一条规则就可以了。

输出的图片和字体文件的名字是一个hash值，

基础配置:

const path = require("path");
const HtmlWebpacPlugin = require("html-webpack-plugin");
module.exports = {  
    mode: "development",  
    entry: "./src/index.js",  
    output: {    
       path: path.join(__dirname, "dist"),    
       filename: "bundle.js", 
    }, 
    module: {   
       rules: [      
        {       
           test: /\.js$/,        
           use: "babel-loader", 
       }, 
       {        
           test: /\.(jpg|png|jpeg|gif)$/,
           use: {
               loader: "file-loader",
               options: {
                   name: "[name]_[hash].[ext]",
                   outputPath: "imgs/",
               },
           },
       },
    ],
  },  
  plugins: [new HtmlWebpacPlugin({ template: "./src/index.html" })],
};

这里配置的name值为[name]_[hash].[ext]中的name指的是图片原本的名字，hash指的生成的hash值，ext指的是图片的后缀。

除了使用file-loder之外，还可以使用url-loader对图片和字体进行解析。

url-loader的使用和file-loader的使用是基本一致的，区别在于它们的options参数。

url-loader的options中有一个参数为limit，用于设置当等于或者小于多少字节时，图片会被转换成更小的base64格式。

建议图片过大时，不要将图片转成base64格式，因为产生的base64长度过长，limit默认值8kb。

file-loader和url-loader的区别就是：url-loader会将图片转成base64。