介绍

在搭建项目的时候，有时需要将图片转为网站图标，但项目需求里不仅仅需要多种尺寸的favicon.ico，有时可能还需要安卓和ios在apple-touch-icon这类私有属性的各种尺寸icon，我们可以让项目构建打包之后自己生成。

安装依赖

npm install favicons favicons-webpack-plugin -D

配置依赖

const path = require('path');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); // 生成favicons

module.exports = {
  entry: {
    index: path.resolve(__dirname, '../src/index.js'),
    // second: path.resolve(__dirname, '../src/test.js')
  },
  output: {
    path: path.resolve(__dirname, '../dist'), // 打包结果输出路径
    filename: 'static/js/[name].[chunkhash:8].js', // 每个输出js的名称
    publicPath: '',  // 打包后文件的公共前缀路径
    clean: true, // 清除dist内容
    libraryTarget: 'umd', // 采用通用模块定义
    libraryExport: 'default' // 兼容 ES6 Module、CommonJS 和 AMD 模块规范
  },
  resolve: {
  },
  module: {
    rules: [
    ]
  },
  plugins: [
    new FaviconsWebpackPlugin({
      logo : 'public/favicons/favicon.jpg', // 目标图标路径 格式：jpg / png / svg
      prefix : 'favicons/' ,   // 生成图标前缀路径
      devMode : 'light', // 生产模式，默认为light，可选：webapp / light
      mode : 'webapp' ,  // 打包模式，默认为auto，可选：webapp / light / auto
      // publicPath: '',
      outputPath: 'favicons/',
      cache: true,
      inject: true,
      manigest: 'favicons/manigest.json',
      favicons: {
        appName: 'my-app',
        appDescription: 'My App',
        developerName: 'App',
        developerURL: null,
        background: '#fff',
        theme_color: '#fff',
        icons: {
          coast: false,
          firefox: false, // Firefox OS 图标
          windows: false, // Windows 8 图标
          coast: false, // Opera 图标
          android: false, // Android 主屏幕图标
          appleIcon: false, // Apple 触摸图标
          appleStartup: false, // Apple 启动图像
          favicons: true, // 网站图标
          yandex: false, // Yandex 图标
        }
      }
    })
  ]
}