Load resource files before Webpack5 using file-loader, url-loader, raw-loader, etc. After Webpackage 5, you can directly use asset Module type to replace the above loader, which will first use the loading mode before WebPackage 5 and the new loading mode added after WebPackage 5

  • The preparatory work

    Prepare two different image resources, mine is one56KBA picture and11KBAdd the two images to the project, and then display the two images on the page and then package them to see the output

    The code is as follows:Packing results are as follows:Packaging will report an error message requiring a suitableloaderTo load such files

  • file-loader

    file-loaderIs to help us process itimport/require()The file resource is imported and will be placed in the folder we output. As mentioned above, an error will be reported after importing the image resource, so we are importing it nowfile-loaderAfter the configuration is complete then see the results in the package

    • The installation

      yarn add file-loader -D

    • configuration

      Only need towebpackAdd arulejustPacking results:Found in thebuildThere are two more files in the folder, these two files are the two images used, and then run to find that the images can load normally

    • File name rule and configuration file name

      As you can see from the packing result above, the resource file will be added to the specified packing folder, and the name is changed to a long stringMD4Hash function processing generated byhashValue), some companies will require the format of the file name after packaging, such as the need to retain the original file name, add the company prefix, retain the extension, this time can be usedPlaceHoldersTo finish, aboutPlaceHoldersThe official documentation explains it in detail:Here are some common onesPlaceHolders

      • ext: Handles file extensions
      • name: Process file name
      • hashUse:MD4Hash function processing generated byhashValue (by default, it is the hexadecimal digest of the hash)
      • contentHash: Specifies the hash method that generates the hash value of the file content. (the default md4)
      • path: relative to webpack/configcontextThe resource path of.
      • hash:<length>: Indicates the length of the screenshot hash. The default value is 32 characters

      Configuration mode:

      Packing results:

    • Example Set the file path
      • The path is spelled before the name
      • Set the outputPath

  • url-loader

    url-loaderUsage and function basically andfile-loaderIt’s the same thing, buturl-loaderYou can convert the file tobase64theURI.

    • The installation

      yarn add url-loader -D
    • configurationThe discovery is just thatfile-loaderreplaceurl-loaderCan pack properly and can display properly, butbuildThere is no corresponding resource file in the folderurl-loaderBy default, the image resource is converted tobase64The encoding format is as follows:
    • url-loaderthelimitThe above mentionedurl-loaderImage resources are converted by default tobase64Encoding format, this has disadvantages, if there are too many images or image resources when the whole page load speed will be very slow, so this can be usedlimitTo do the limit, is the picture resource is greater than how much time do not proceedbase64The specific configuration of encoding format conversion is as follows:Running results:

      Found that addlimitLarge images are no longer converted

  • asset module type

    The four types of resource modules (quoted here from the official documentation)

    • asset/resourceSend a separate file and export the URL. Previously by usingfile-loaderThe implementation.
    • asset/inlineExport the data URI of a resource. Previously by usingurl-loaderThe implementation.
    • asset/sourceExport the source code of the resource. Previously by usingraw-loaderThe implementation.
    • assetAutomatically choose between exporting a data URI and sending a separate file. Previously by usingurl-loaderAnd configure the resource volume limitation implementation.

    configurationSame additionrule

    1. Loading picturesConfig file name and specify path and aboveloaderThe following figure specifies the file name and corresponding pathAnother way to change the file path is through Settingsoutput.assetModuleFilenameTo modify the figureSo you have to be careful if you set itfilenamePreferentially usefilenameThe configuration of the
    2. The limit effect of url-loader must be set to the resource typeassetAnd then in the Settingsparser.dataUrlCondition.maxSizeParameters are shown as follows:Running results: