webpack 中进行图片处理 file-loader img-loader url-loader

当webpack 处理图片的时候会使用如下 loader

file-loader url-loader img-loader

file-loader :对文件进行处理 （如：图片文件等）

url-loader : url-loader中内置了 file-loader 所以当使用 url-loader的时候，可以不使用 file-loader

img-loader: 作用是对图片进行压缩

1安装

命令行 npm install file-loader url-loader img-loader --save-dev;

2 在webpack.config.js 中 配置

let path = require("path");

module.exports = {
    mode:"development",
    entry:{
        app:"./src/app.js"
    },
    output:{
        path:path.resolve(__dirname,"./dist/"),
        filename:"[name].bundle.[hash:5].js"
    },
    
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {
                        loader:"style-loader"
                    },
                    {
                        loader:"css-loader" 
                    }
                ]
            },
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            limit:50000   //表示低于50000字节（50K）的图片会以 base64编码
                            outputPath:"./asset/images",
                            name:[name].[hash:5].[ext],
                            pulbicPath:"./dist/asset/images"
                        }
                    }
                ]
            }

        ]
    }


}

这里对 url-loader 中的options的几个参数项作一下说明

limit 是对文件是否用base64编码的存储的 设置

outputPath  是打包时输出文件的位置  它应该是 上文中的output中的path 和 这里的值的连接

                    output:{
                           path:path.resolve(__dirname,"./dist/"),
                           name:"[name].bundle.[hash:5].js"
                    },

                   outputPath:"./asset/images",

                    所以输出的路径应该是  __dirname + ./dist + ./asset/images   =  /dist/asset/images

filename: 是输出的文件名称  [name].[hash:5].[ext]       其中【ext】占位符是 表示文件的后缀名的

publicPath:  表示的是加载文件时的路径   publicPath + filename 就是浏览器中的加载路径 与 outputPath无关

                  pulbicPath:"./dist/asset/images"

                   所以浏览器中的加载路径是   publicPath + filename = ./dist/asset/images/ [filename]

 以上是自己的理解           下面是网上的解释

其实最重要的就是他的这几个参数：limit、name、outputPath、publicPath

limit：

文件大小小于limit参数，url-loader将会把文件转为DataURL；文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

 
name：

输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希；加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。

 
outputPath：

表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面。

 
publicPath：

表示打包文件中引用文件的路径前缀，如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了
---------------------