webpack中的图片打包之路

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

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

1. 在JS中使用图片

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

webpack中的相关配置

{
  test: /\.(jpg|png|gif)$/,
  use: [{
    loader: 'url-loader',
    options: {
      outputPath: 'images/'
      limit: 100*1024
    }      
  }]                
}

上面使用的是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为

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

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

 

 3. 在HTML中引用图片

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

webpack配置：

{
  test: /\.html$/,
  use: 'html-withimg-loader'    
}

这样，html中的图片也能被正确的打包了！