webpack入门第十节：处理图片以及其他文件（完结章）

处理图片以及其他文件（完结章）

安装

npm install file-loader --save-dev

配置：

test:/.\(png|jpg|svg)$/i,

loader:'file-loader'

不管是<img src="相对路径">还是background:url(绝对路径)，loader都会自动进行处理，正常填写即可

但是在组件中，我们就不能这样正常处理，我们需要使用绝对路径或者在src中这样写：<img src="${ require(../../assets/bg.png) }"

要指定打包出来的图片路径，我们可以用

            {
                test:/.\(png|jpg|gif|svg)$/i,
                loader:'file-loader',
                //五位数的哈希，.[ext]加上它自己的后缀名
                query:{
                    name:'assets/[name]-[hash:5].[ext]'
                }
            }

介绍file-loader同时再说个url-loader

npm install url-loader --save-dev

这个是干什么用的呢？如果你的图片大于了指定的大小，就会交给file-loader去处理，如果很小就就会直接转成base64编码

            {
                test:/.\(png|jpg|gif|svg)$/i,
                loader:'url-loader',
                //五位数的哈希，.[ext]加上它自己的后缀名
                query:{
                    limit:20000,//20k 指定大小
                    name:'assets/[name]-[hash:5].[ext]'
                }

ok,我们再来说一个image-loader，是用来压缩图片的

npm install image-webpack-load --save-dev

            {
                test:/.\(png|jpg|gif|svg)$/i,
                loaders:[
                    'url-loader?limit=1000&name=assets/[name]-[hash:5].[ext]',
                    'image-webpack'
                ]
            }

完结撒花！