url-loader和file-loader的区别

file-loader将图片移动到dist目录(或者outputPath定义的目录)下并返回一个相对于dist的路径

url-loader相比file-loader多了一个limit配置项(1024 = 1kb),在超过limit的时候执行和file-loader相同的功能,当小于limit时会将文件打包成base64文件到js打包文件里

rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name]_[hash:6].[ext]',
          outputPath: 'images/',
          // url-loader的limit配置项
          limit: 2048
        }
      }
    }
  ]

url-loader会将图片转成base64文件放在打包js文件里,节约了一次HTTP请求,如果图片太大会导致加载慢(适合小图片

 

你可能感兴趣的:(webpack)