记录一下项目中动态配置favicon

初期是直接配置在 HtmlWebpackPlugin中，添加 favicon属性
favicon: path.resolve(__dirname, '../src/assets/xxxx.ico'),
现在需要根据国家码动态生成图标

• 先把资源都放到public中
• 再到webpack.dev.js中配置devServer,将contentBase写成public

contentBase: 'public',

• 再到index.html中去动态写入

function changeFavicon(url) {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'icon';
    link.href =url;
    document.getElementsByTagName('head')[0].appendChild(link);
}




if(window.X_ENV === 'xxxx'){
    changeFavicon('./img/xxx.jpg')
}else{
    changeFavicon('./img/xxxx.ico')
}

• 最后 看一下的打包 是否把public文件打到dist中 如果没有需要手动去下个 copy-webpack-plugin ,这里需要注意他的版本，有可能下的版本不兼容当前webpack
• 再到webpackage.config中去 配置一下

plugins: [


  new CopyPlugin({
    patterns: [
      { from: "public", to: "" },
    ],
  }),
]