webpack4.x打包图片文件遇到效果不显示的问题（file-loader加载遇到的狗血问题）

file-loader加载遇到的狗血问题-webpack4.x

最近在学习vue，看的b站视频学习，b站里面用的是webpack3.6，而我用的是webpack4.43.0版本的，在webpack4.x版本和3.x版本还是挺有区别的，比如配置，打包方式就不一样。在学习到图片文件的打包配置时，遇到了狗血问题，现阶段我还是说一下webpack4.x的操作步骤，怎么样执行到打包图片文件这个地方，遇到了什么问题？（当图片大于limit限制，启动file-loader加载生成文件，生成成功但是页面没有效果，同时配置file-loader影响了url-loader以base64的方式加载图片的显示）

执行步骤

1、安装node.js环境

首先安装node.js环境，切换仓库为阿里云仓库
参考文章：vue环境搭建
这步，可以安装到该文章 （四、设置环境变量（非常重要））这一步即可，也就是安装好node.js和配置好淘宝镜像
切换为淘宝镜像后，所有的npm指令全部可以替换为cnpm

2、安装webpack

先安装webpack（全局安装）：

安装最新版
npm install --global webpack
安装特定版
npm install --global webpack@<version>
比如：npm install --global webpack@3.6

webpack 4+ 版本，你还需要显式的安装 CLI
npm install --global webpack-cli

配置了阿里仓库的直接将npm改为cnpm

局部安装webpack

局部安装的话就需要进入到你的vue项目，才能进行安装
比如我这里有个项目demo结构暂时是这样的

那么我们要先进入到项目根目录下，也就是webpack.config.js同级目录下，

执行如下命令：

安装最新版
>  npm install --save-dev webpack

安装特定版
>  npm install --save-dev webpack@<version>
比如：npm install --save-dev webpack@3.6

webpack 4+ 版本，你还需要显式的安装 CLI
>  npm install --save-dev webpack-cli

配置了ali仓库的直接将npm换成cnpm
* --save-dev表示在局部生成一个包管理文件夹nodel_model,并且下载的node依赖都
* 存在这个局部的文件夹中，这就是和全局的不同，全局用--global指定的，下载的
* 依赖存在于我们全局设置的模块文件夹中

由于我直接就是下载的最新版，也就是webpack4.43.0版本，所以后续执行可能略有不同
执行后会在同级目录生成一个node_modules文件：

3、新建webpack.config.js

webpack.config.js有一些基本的配置

const path = require('path') //引入node相关的模块的包，path是个模块，因为下面要指定导出路径时需要的是绝对路径，需要用到这个模块

module.exports = {
   
   
    entry: "./src/main.js", //需要打包导出的文件
    output: {
   
    //打包导出后的文件路径
        /*resolve()方法可以对两个路径进行拼接，__dirname 是node上下中一个全局变量，可以获取当前目录所在路径，dist就是我们要导出的路径
          理解：__dirname获取本文件（webpack.config.js）的所在路径，是个绝对路径，然后和后面的dist进行拼接，也就指定到了本文件同级目录下的dist文件夹中了*/
        path: path.resolve(__dirname, "dist"),
        filename: "build.js", //打包导出的文件名
        /*会给所有url的前面