webpack之打包图片

前言：当我们在css或者img标签中使用本地或者网络图片时，webpack需要通过url-loader或者file-loader来对图片进行处理。

url-loader与file-loader的区别：url-loader可以将图片转为base64字符串，能更快的加载图片，一旦图片过大， 就需要使用file-loader的加载本地图片，故url-loader可以设置图片超过多少字节时，使用file-loader加载图片。

安装：

npm i url-loader file-loader -D

使用：

{
     test: /\.(png|jpg|gif|jpeg)$/i,
     use: [
          {
               loader: 'url-loader',
               options: {
                   name: '[name]-[hash:5].[ext]',
                   limit: 20000,
                  publicPath: 'dist/',
                  outputPath: 'images/'
              }
          }
     ]
}