study / webpack打包图片及动态修改显示

规定需求：按照登录的用户权限区分显示head头的title及favicon

看到这需求第一反应，简单啊…不就是js中动态修改值嘛…
然鹅！开始添加后才知道自己真的是图样图森破~~

首先设置title的值，这一步很简单。
但因为title标签在head标签中，不能 通过document.getElementByTagName(“title”).innerHTML = xxx 来设置，而是通过document.title = xxx 的方式为title赋值。
此时在html文件中设置空的title标签，在script标签中获取权限的值，进而区分不同的title，完成。

接下来设置favicon。
经过一系列代码的查找，发现在当前的项目中的webpack文件里通过设置HtmlWebpackPlugin的favicon属性来添加一个相对路径下的.ico，将这一个固定的icon图片打进包（线上环境通过CDN获取，此处与该问题无关，省略），大概代码为：

const HtmlWebpackPlugin = require('html-webpack-plugin');

new HtmlWebpackPlugin({
        favicon: dir(__dirname, '../image/favicon.ico')
})

问题来了，webpack文件中没办法获取到js中的值，也就是拿不到用户权限无法做区分。所以解决问题的思路又回到了js中…

如果通过动态添加标签的方式，在js中加完区分逻辑后，动态添加一个link标签，看起来是个不错的选择，于是：

(function(){
        let link = document.createElement("link");
        link.type = "image/x-icon";
        link.rel = "shortcut icon";
        if(isOne){
                link.href="favicon1.ico";
                document.title = "one";
        } else {
                link.href="favicon2.ico";
                document.title = "two";
        }
        document.getElementsByTagName("head")[0].appendChild(link);
}())

注释掉HtmlWebpackPlugin中的favicon设置，build测试刷新界面，没设置成功，界面显示默认的灰色圆圈…

在控制台中查看标签，很明显link标签已添加，src处也显示了对应的值…
查看打包后生成的文件，没有找到这两张图片！！
图片没有打上？！

查看webpack中的配置：

...
{
        test: /\.(jpe?g|png|gif|svg)$/i,
    use: [{
            loader: 'file-loader',
        options: {
        limit: 1024,
        outputPath: 'imgs'
        }
        }],
    include: dir(__dirname, '../image')
},
{
        test: /\.ico$/,
    use: 'file-loader',
    include: dir(__dirname, '../image')
}
...

以上配置理解为：
（1）对于../image 路径下的jpeg，jpeg，png，gif，svg几种类型的文件，通过file-loader将其进行处理并移动到打包后的imgs路径下，限制图片最大范围1024。
（2）对于../image 路径下的ico文件，通过file-loader处理，未设置输出

修改以上对ico文件的设置：

...
{
        test: /\.ico$/,
    use: [{
                loader: 'file-loader',
                options: {
                        name: '[name].[ext]'
        }
        }],
        include: dir(__dirname, '../image')
}
...

修改后的设置理解为：
对于../image 路径下的ico文件，通过file-loader处理，输出至根目录，名称为文件的名称，扩展名为文件的扩展名。

build测试。打完的包中仍然没有两张图片…
原因：图片没有引入！

在JS中使用require的形式导入图片（否则webpack不能正常导入，因为路径不符合其解析规范），注意引入路径正确！！

• ← Previous Post
• Next Post →