webpack笔记（4）对图片的处理

npm 安装：

file-loader： 解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy

npm install --save-dev file-loader url-loader

 

1. 打包图片

module.exports = {
    {
        test: /\.(png|jpg|jpeg|gif)$/,
        use : [{
            loader : 'url-loader',
            options : {
                limit : 8192,        //把小于8192B的文件打成Base64的格式
                name : '[name].[ext]',
                outputPath : 'images/'  //将文件打包至images路径
            }
        }]
    }
}

 

2.解决HTML中的图片不会被打包的问题

npm 安装

npm install html-withimg-loader --save

在webpack.config.js中配置

module.exports = {
    {
        test: /\.(htm|html)$/,
         use:[ 'html-withimg-loader'] 
    }
}