打包css:url图片资源与html:src资源

打包css:url图片资源与html:src资源

• 使用 url-loader和file-loader两个包
• 下载安装 npm i url-loader file-loader -D
• 使用

    module.exports = {
        module:{
            rules:[{
                    test:/\.(jpg|png)$/,
                    //使用一个loader
                    loader:'url-loader', //会基于file-loader
                    options:{
                        //优点:减少请求数量
                        //缺点:图片体积会更大-->转换base64
                        limit:16*1024,
                        //输出图片位置
                        outputPath:'/imgs',
                        //打包后的图片路径+前缀
                        publicPath:'./imgs'
                        esModule:false //关闭es6模块解析方式,使用commonjs去解析,新版本不需要
                        name:'[hash:10].[ext]'  取图片的hash的前十位   --   原扩展名
                    },
                    //use:'url-loader?limit=16940'同上
                    //limit用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片,才会被转换为base64格式的图片
* 运行 npm i html-loader -D
                    {
                        test:/\.html$/,
                        loader:'html-loader',
                        options:{
                            limit:16*1024
                    }
                }
            ]
        }
    }