webpack中的图片打包之路

最近在Github上弄项目,需要搭建一个webpack开发环境。Emmm,是的,从0开始搭建一个项目确实不容易,光Webpack的坑就够我踩一路的了。这不,刚搭建到“图片打包”这里,就遇到了麻烦。最后找到了问题的源头,在mini-css-extract-plugin(抽离CSS代码为一个CSC文件的插件)这个插件上。

错误操作就不示范了,下面来探讨一下webpack中的图片打包方式。

1. 在JS中使用图片

1 import logo from './images/logo.png'  // 引入图片资源并返回一个新的图片地址
2 let img = new Image()
3 img.src = './images/logo.png'    // 错误!JS不会认为'./images/logo.png'一个资源,而是字符串
4 img.src = logo 

webpack中的相关配置

 1 {
 2   test: /\.(jpg|png|gif)$/,
 3   use: [{
 4     loader: 'url-loader',
 5     options: {
 6       outputPath: 'images/'
 7       limit: 100*1024
 8     }      
 9   }]                
10 }

上面使用的是url-loader,该loader比file-loader更好的地方就是能根据图片的大小来决定是使用base64格式还是正常加载。

例如上面的配置,当图片小于100KB时使用base64格式输出,这样就可以避免一个http请求。 

limit:属性值有三种类型:Number(限定最大值),Boolean(是否启用base64),String,默认为undefined

 

2. 在CSS中使用图片,例如:背景图片

这种方法的url-loader配置同上,但是有一个问题。如果你在配置CSS的过程中使用了mini-css-webpack-plugin这个插件来抽离CSS,那么一定要注意路径的问题,我就是在这上面踩了个大坑,费了不少时间。

 

CSS:  

 body {  
  background: url('../images/logo.png')  
}

 通过相对路径引用了一张图片(css文件夹和images文件夹处于同一级)

 

配置文件:

{
    test: /\.less$/,
    use: [{
           loader: MiniCssExtractPlugin.loader,
           options: {
                // 在这里配置publicPath,不然CSS里面的图片路径是以CSS目录为根目录的
                publicPath: '../'
           }},
      'css-loader',
      'postcss-loader',
      'less-loader'
  ] },

 注意这里的 ‘publicPath’ ,当初我就是没有设置该属性,导致build后的CSS为

1 {background: url(images/logo.png)}  // 明显路径错了
2 {background: url(../image/logo.png)}  // 设置publicPath值为 '../'

这样,打包后的CSS中背景图片的引用就正确了。

 

 3. 在HTML中引用图片

我们经常使用html-webpack-plugin插件来给项目设置一个HTML模板,所以有时我们会在模板中插入图片,但是webpack对HTML中的图片是无能为力的,因为img标签的src引入的图片没有被依赖,不会被打包,所以这时候我们需要使用 html-withimg-loader

webpack配置:

1 {
2   test: /\.html$/,
3   use: 'html-withimg-loader'    
4 }

这样,html中的图片也能被正确的打包了!

posted @ 2019-08-26 10:33 狐耳 阅读(...) 评论(...) 编辑 收藏