Article reference

1. url-loader github

file-loader

1. Official explanation:
   Instructs webpack to emit the required object as file and to return its public URL
2. Personal understanding:
   is to import the file as a module and return the URL path of the file

Application scenario

1. png, jpg, svg pictures, body resources randomly generate a hash value, as the name of the picture
2. Package, return the packaged file (including hash value) path

installation

npm install --save-dev file-loader

Case-Introduce font library configuration

1. The file-loader configuration must be set to esModule: false, otherwise the introduced resource is [object Module]
2. You can specify the outputPath to specify the location of the picture packaging,
3. publicPath specifies the path of the font

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  
  module: {
    rules: [
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        use: {
          loader: "file-loader",
          options: {
            esModule: false, // set to false here
            outputPath: "fonts/", // Specify the image input folder, the packaging address is "/dist/fonts/font file"
            publicPath: "/fonts", // Specify the path of the font, that is, the address introduced by the packaging result is "/fonts/font file name"
          }
        }
      },
      {
        test: /\.(scss|css)$/,
        /**
                   * The loader is executed from start to finish
                   * 1. Execute sass-loader first, convert sass file to css
                   * 2. css-loader converts the converted css file to js module
                   * 3. style-loader inserts css into the <style> tag in HTML
         */
        use: [
          {
            loader: "style-loader" // Generate the JS string as a style node
          },
          {
            loader: "css-loader" // Convert CSS into CommonJS module
          },
          {
            loader: "sass-loader" // Compile Sass into CSS
          }
        ]
        // Equivalent to
        // use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

http://10.192.202.8:9000/fonts/0bce114e7fb6d91c66a3ddc5ae561ffc.ttf The address of the packaged image

url-loader

The url-loader function is similar to the file-loader, but when the file size (in bytes) is lower than the specified limit, the file can be converted to base64

installation

npm install --save-dev url-loader

Case-Picture packaging

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              esModule: false, // set to false here
              outputPath: "images/", // Specify the image input folder, the packaging address is "/dist/images/image name"
              publicPath: "/images", // Specify the path to get the image, that is, the address introduced by the packaging result is "/images/image name"
              // limit (if it is less than 8K, it is converted to base64, otherwise it returns a url address)
              limit: 8192,
              name: "[name].[hash:8].[ext]" // Enter the picture name
            }
          }
        ]
      }
    ]
  }  
};

http://10.192.202.8:9000/images/testimage.2369a289.png The address of the packaged image

What is the difference between file-loader and url-loader?

file-loader

file-loader returns the url of the picture

url-loader

The url-loader can process the pictures by the limit attribute. When the picture is smaller than the limit (unit: byte), it will be transferred to base64. When it is greater than the limit, the file-loader will be called to process the picture.

Same point

All process pictures, font icons and other files in webpack.

relationship

The url-loader encapsulates the file-loader, but the url-loader does not depend on the file-loader.

After the webpack packs the img in the html, the src is "[object Module]"?

ReferenceThe problem of src being "[object Module]" after img in webpack packaging html

1. If you use "file-loader": "^4.2.0" or "file-loader": "^2.0.0" but it can be packaged normally
2. Later found that the file-loader is in the new versionesModule defaults to true, so manually set to false

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: "url-loader",
          options: {
			// By default, the file loader generates JS modules using ES module syntax
            esModule: false, // set to false here
            outputPath: "images/", // Specify the image input folder
            publicPath: "/images", // Specify the path to get the picture
            // limit (if it is less than 8K, it is converted to base64, otherwise it returns a url address)
            limit: 8192,
            name: "[name].[hash:8].[ext]" // Enter the picture name
          }
        }
      ]
    }
  ];
}

.webpackStudy .huangbiao {
    background-image: url(/images/testimage.2369a289.png);
    color: red;
}