是的，就在昨天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❤
网友评论