webpack对图片路径的处理

前言

原本我们写在网页中的代码，其中对图片资源路径的引入，在打包后文件位置会发生变化，这时图片路径也会发生变化。
这时我们需要解决这个问题：不管位置怎么变，图片路径一定是正确的！
图片大致分为如下几种情况：

1. css中的图片问题
2. 网页标签img中的图片（分为静态的和绑定的）

一、css中的图片问题

1. 安装相应的图片解析模块【解析与压缩】

yarn add url-loader file-loader image-webpack-loader -D

2.在webpack.config.js配置文件中配置加载规则

{
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
{
                test: /\.(png|svg|jpg|gif)$/,
                // use: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]"
                use: [
                    {
                        loader: 'url-loader',
                        options:
                        { // 这里的options选项参数可以定义多大的图片转换为base64
                            name: '[name].[ext]',
                            limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                            outputPath: 'images' //定义输出的图片文件夹
                        }
                    },
                    {    //压缩图片要在file-loader之后使用
                        loader: 'image-webpack-loader',
                        options:
                        {
                            bypassOnDebug: true
                        }
                    }

                ]
            }

css代码

用webpack打包后你会发现图片路径不对

原因：
webpack打包时在css中直接找到了需要的图片文件，比如 1.png
这时直接就会把这个文件提取出来放入到dist文件夹中中images中（images目录是我们自己设置的），此时图片路径就是images/1.png ，然后他会直接把这个路径作为新生成的css中图片对应的路径。

此时就需要处理下生成后的图片路径让他保持正确，只需要修改下我们的css的loader解析规则，如下：

{
                test: /\.less$/,
                use: [
                    // MiniCssExtractPlugin.loader, 
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../' //这个option必须写，否则css中图片路径可能会出错
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            }

图片地址就正常啦

二、网页标签img中的图片（静态地址）

对应这种，基本上什么都不用管，他会自动的调整始终保持正确的。

三、网页标签img中的图片（动态地址）

如果我们把一个图片的地址作为veu的data中的一个字段，如下：

此时执行后图片是显示不出来的，因为图片根本就没有被打包（对于动态地址而言）

解决方式一
我们可以把图片当中一个模块引入到组件中，然后将他赋值为data中字段的值即可。
如下：需要的所有图片都要这样来引入

解决方式二
使用require语句导入所需要的模块到组件中进行使用，这样会简洁点。