webpack打包图片

图片打包关键要用到file-loader或url-loader，其中url-loader与file-loader功能基本一致，只不过url-loader能将小于某个大小的图片进行base64格式的转化处理。

安装

npm install --save-dev url-loader

module:{
 	rules:[
            {
      	       test:/\.(png|gif|bmp|jpg)$/,
      	       use:'url-loader?limit=5000&name=image/[hash:8]-[name].[ext]'
            }
 	]
 }

 {
         //将图片打包到发布环境中的images目录下

          test: /\.(jpg|jpeg|gif|png|svg)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 1024 * 1,
              name: 'images/[hash:8].[ext]',
              publicPath: '../'
            }
   }

 

注意：limiet的意思是：图片大小小于limit时，使用base64转码。大于limit时，正常打包。

        name：通过name属性改变图片的打包目录和文件名。

        hash：图片经过处理后，会在输出文件夹中生成图片，此时图片的名字为hash。ext代表图片的格式。

publicPath：为你的文件配置自定义 public 发布目录

outputPath：为你的文件配置自定义 output 输出目录 

注意：webpack 在打包时，首先会把图片复制到 /dist/images/ 文件夹下，然后把 css 文件中的 url 路径替换为 webpack 中 options 的 name 属性指向的路径，即 /images/logo.jpg, 但是这个路径是相对路径，是相对于 /dist/css/~.css 来说的， 所以此处引用的 文件地址为： /dist/css/images/logo.jpg。 但是我们打包后的 css 文件夹中， 并没有 images/logo.png, 所以图片并没有渲染出来。