Difference url-loader and file-loader of

file-loaderDist move to the next picture directory (or outputPath defined directory) and returns a path relative dist

url-loaderCompared to more than a file-loaderlimitCI (1024 = 1kb), the time limit is exceeded perform the same function and file-loader, when the time limit will be less than base64 files into files in the package file to js

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

url-loader will turn into a picture file in base64 packed js file, saving a HTTP request, if the picture is too large leads to slow load (Suitable for small pictures）

Intelligent Recommendation

Third, Loader ---- File-Loader and Url-Loaderr (loader loaded with pictures)

1、file-loader ** In actual development, the introduction of pictures generally have two, IMG and Background-Image, 1.1, Background-Image Settings Background The class name Hulu1 here is changed to Hul...

webpack learning file-loader, url-loader, css-loader

Installation webpack Webpack command execution npx command that the implementation of the project in webpack node_modules commands executed directly webpack otherwise, you will need to install a globa...

url-loader

Original address:https://webpack.js.org/loaders/url-loader/ webpack version: 2.2.1 Converting image files to base64 encoding and loading into the browser can reduce the number of http requests, but in...

Webpack image file processing: url-loader and file-loader

1. Webpack image file processing 1.1, picture file processing method 1: url-loader 1.2, picture file processing method 2: file-loader 1.3. Image file processing-modify file name Generate file storage ...

webpack study notes -2-file-loader and url-loader

1 Introduction If we want to introduce the picture page (including the url img src and the background). When we webpack-based development, the introduction of the picture will encounter some problems....