webpack(四)-----图片资源的打包

base64：在客户端本地解码所以会减少服务器压力，如果图片过大还是用base64会导致cpu调用率上升，网页记载时编卡
优点：减少请求数量(减轻服务器压力)
缺点：图片体积会变大（文件请求时长增加）

图片资源的打包主要依赖于file-loader和url-loader

---

test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。
loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会
自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
url-loader 后面除了 limit 字段，还可以通过 name 字段来指定图片打包的目录与文件名：
eg: use:‘url-loader?limit=10000&name=img/[hash:8]-[name].[ext]’

---

[hash:8]：取图片的hash的前10位
[ext]：取文件原来拓展名

url-loader 缺点: 默认处理不了html中的img图片

图片资源的打包

两种方式:
     module: {
        rules: [
            {
                //匹配规则
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片
                test: /\.(jpg|png|gif|woff2|woff|svg|eot|ttf)$/,
                use:'url-loader?limit=10000&name=imgs/[hash:8]-[name].[ext]'
            }
        ]
    },

区别在于:1个用use实现 一个用loader

二、
    module: {
        rules: [
            {
                //匹配规则
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片
                test: /\.(jpg|png|gif|woff2|woff|svg|eot|ttf)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    //name 字段来指定图片打包的目录与文件名
                    name:'img/[hash:8]-[name].[ext]'  
                }
            }
        ]
    },

img引入的图片的解决方式为引入html-loader

html-loader:/处理html文件的img图片(负责引入img，从而能被url-loader进行处理)

    module: {
        rules: [
            {
                //匹配规则
                test: /\.css$/,
                //详细的loader
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: 'img/[hash:8]-[name].[ext]'
                }
                // use:'url-loader?limit=10000&name=imgs/[hash:8]-[name].[ext]'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },

如果出现下列问题

ERROR in Error: C:\Users\Administrator\Desktop\test\src\index.html:134
/******/ if (!scriptUrl) throw new Error(“Automatic publicPath is not supported in this browser”);

在webpack.config.js文件中添加
module.exports =
{
output: {
publicPath: ‘./’
}
}

如果出现一下问题
打包后的src=[object,Module]
问题:因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs解析时就会出现[object,Module]
解决:关闭url-loader的es6模块化，使用common解析

    module: {
        rules: [
            {
                //匹配规则
                test: /\.css$/,
                //详细的loader
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    //图片
                    limit: 8 * 1024,
                    name: 'img/[hash:8]-[name].[ext]',
                    esModule:false   //关闭url-loader的es6模块化，使用common解析
                }
                // use:'url-loader?limit=10000&name=imgs/[hash:8]-[name].[ext]'
            },
            {
                test: /\.html$/,
                //处理html文件的img图片(负责引入img，从而能被url-loader进行处理)
                loader: 'html-loader',
            }
        ]
    },