Vue.js进阶系列(17)--Webpack配置图片

  是的，就在昨天Webpack已经成功的将css文件划分到自己的业务范围内，这还不够，所以今天的webpack决定收服图片类的文件。[这个图片很调皮，小编从昨天调试到现在，才成功的把它显示出来 ┭┮﹏┭┮ ]

image.png

1.图片打包方式

  photo：因为我平常都是让url带我去找css大哥的，所以我打包的话，也是跟css大哥一起打包到“服务器”要我们干活的地方。
【因为图片也是css样式中的一部分，所以我们仍然将css文件作为整个模块，在入口函数中引入css文件。如果忘记了的小伙伴可以参考下面的代码：】

image.png

目标是不是即清晰又明确，就是将图片作为body的背景图片（奸诈笑容.jpg）

2.图片的loader类型:url-loader / file-loader

  photo：当我和css大哥一起拿着 css-loader工牌一起进去的时候，门口的保安居然不让我进！告诉我我和css大哥是不一样的物种，要另外去前台拿别的工号牌。此刻我深刻的体会到一句话：生命中最遥远的距离不是生与死，而是我们拿着同样的工号牌，你进去了，我却还在外面 ┭┮﹏┭┮。
【每一类的文件都会有相应的loader，只有找到对的loader才能被webpack成功部署，而图片的loader不是css-loader，而是url-loader。因为图片是通过url连接到页面中的。当我们没有安装url-loader时，就会出现下图的错误】

image.png

3.配置loader步骤

  photo：后来我去了前台，前台的小姐姐给了我url-loader工号牌，帮我登记好员工信息表，我这才进去找到了我的css大哥啊！！！
【配置laoder的步骤如下：】
①在终端输入命令：npm install --save-dev url-loader
② webpack.config.js文件中的mouble关键字下进行配置

module.exports={
    module: {
        rules: [
          {
            test: /\.(png|jpg|gif|jpeg)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 47000,
                    }
                }
            ]
          }
        ]
      }
}

效果图.png

4.图片大小的处理

  photo：光阴似箭日月如梭，我已从当初稚嫩的少年转变成了的老油条。某天我的朋友A听说我们这里福利很好也想来，于是我就自作主张将A带前台领取了url-loader工号牌。当我意气风发走到门口的时候，保安，把我放了进去，却把A拦在了外面！(这个场景似曾相似).保安说， 我比较瘦小，用的是url-loader工号牌，A的壮大超出了进出们的标准，保安叔叔说要去前台领取file-loader工号牌才能进去。 这个时候的我又深刻体会到了一句话：生命中最遥远的距离不是生与死，而是我们拿着同样的工号牌，我进去了，我朋友却还在外面 O(∩_∩)O哈哈~。
【眼尖的朋友会发现，在webpack.config.js文件的modle配置图片的时候，多了options：limit选项，这个选项!!!!!就是让我调试了好久的罪魁祸首，当图片的大小大于或者小于limit的值时，会有不同的处理方式，具体见下面解析：】

第一种：图片小于limit

① 工作原理
  当图片小于limit的值时，会将原本是jpg/png/gif格式的图片转换成** base64 的格式，然后浏览器就会从服务器中请求base64 字符串，不需要格外的文件来处理**，所以图片的显示是以base64格式显示的。
② 使用的loader：url-loader

image.png

第二种：图片大于limit

①工作原理
  当图片大于limit的值，webpack会将整个图片打包，当浏览器向服务器发送请求是就会按照图片被打包的路径显示图片，需要格外的文件进行处理，所以显示图片就存在了路径问题，需要通过publicPath添加相应的路径。

浏览器显示的图片路径.png

②使用的loader：file-loader
  只需要在终端安装好file-loader就可以，不需要到webpack.config.js文件的moudle关键字进行配置。详细见下图：

image.png

  图中，打包好的图片将会放置到dist文件夹中。以index.html作为参考，如果想要找到dist中的图片，需要在 文件的前面加上“../dist/”的路径，所以在webpack.config.js文件添加下面的代码：

image.png

最后在终端执行 npm run build 就可以显示图片了。
  最后的最后，小编再补充最后一点，就是打包后的文件名太长了，有时候自己都不知道哪个图片是哪个图片，所以需要 对打包后的图片名字进行规范。只需要要原来 option内部添加下面的代码： name:"img/[name].[hash:8].[ext]"

image.png

  声明了一个name变量，该变量表示打包后图片的名字。
img：将打包后的图片单独放置在img中，所以创建了img文件夹；
[name]:代表图片原来的名字，一定要加上中括号，如果不加中括号就意味着每张图片都叫name.xxx
[hash:8]:为了防止图片重名，需要用hash值来处理，8代表显示的hash值的个数，可以自行修改数值。
[ext]:代表图片原来的拓展名。

❤呼~终于写完这篇折磨了小编很久的文章，心理的大石头总算放下了O(∩_∩)O❤