This is the 26th day of my participation in the August Text Challenge.More challenges in August

In the last article we looked at the use of file-loader, and we configured rules so that when we encountered PNG or JPEG or JPG or GIF or SVG images, they were handed over to File-loader.

Now, what if we want to change the name of the image that file-loader gives us by default?

First, we need to know that file-loader will generate a hash of 128-bit length (then every 4 bits are expressed as 1 bit in hexadecimal and finally displayed as 32 bits in length) according to the file content, as the name of the packaged image. Obviously, the downside of this is that you don’t know how the packaged image corresponds to the pre-packaged image. But we want to be able to clearly understand the relationship between the image before and after packaging, and add the original name of the image to the packaged image name, that is, we want to rename the image.

1. Rules for file names

  • Sometimes the name of the processed file needs to be displayed according to certain rules:

    • For example, keep the original file name and extension, and include a hash value to prevent duplication.

  • When it is done, a placeholder can be used, webpack gives us a lot of placeholder to show different things:

    • V4.webpack.js.org/loaders/fil…
    • We can look up what we need in the documentplaceholder;

  • Here are some of the most popular placeholder options:

    • [ext] : extension of the processing file;
    • [name] : indicates the name of the processing file.
    • [hash]: The contents of the file, usedMD4Hash function (hash function/digest function) processing, generated by one128bithashValue (32Hexadecimal);
    • [contenthash]In:file-loaderneutralization[hash]The results are consistent (inwebpackSome of the other things are different, more on that later);
    • [hash:<length>]: the interceptionhashLength, default32A character is too long;
    • [path]: File relative towebpackPath to the configuration file;

2. Set the file name

In the webpack configuration file, change the use attribute of the Rule for image processing.

{
  test: /.(png|jpe? g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader'.options: {
        name: '[name].[hash:6].[ext]'}}}]Copy the code

Then run the NPM run build command in the current project directory to compile and package (it is recommended to delete the two images generated in the build directory of the output directory before running the command), and then look at the contents in the output directory after successful packaging:

As you can see, the packaged image successfully follows the format we specified (original file name. 6-bit hash value). Original file extension) has been renamed.

3. Set the file path

In addition to the file name Settings, the problem is that when you have a lot of files, if all the files end up in the output directory, it will look like a lot of files are messy. Therefore, if we have multiple images, we want to put them all in a single folder (such as a folder named IMG). In this case, we can use the outputPath attribute to specify the filesystem path to which the target file will be placed:

{
  test: /.(png|jpe? g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader'.options: {
        name: '[name].[hash:6].[ext]'.outputPath: 'img'}}}]Copy the code

Delete the build directory and run the NPM run build command again to package the build directory as follows:

As you can see, both images have been placed in the IMG folder.

In fact, there is another, more common way to specify the filesystem path to which the target file is to be placed, which is to directly prefix the path to be placed in options.name:

{
  test: /.(png|jpe? g|gif|svg)$/,
  use: [
    {
      loader: 'file-loader'.options: {
        name: 'img/[name].[hash:6].[ext]'.// outputPath: 'img'}}}]Copy the code

Re-running the NPM run build package command also successfully placed the two images in the img folder in the output directory.

This section describes how to rename the output file of file-loader and output the file to a specified folder.