為什么文件加載器很重要？

Question

為什么在我可以使用文件的絕對路徑時使用文件加載器很重要？ 例如說圖像...

在這種情況下，我想使用一個名為img.jpg的圖像：

import myImage from "../assets/img.jpg"

    function addImage(src) {
        const image = document.createElement("img");
        image.alt = "our image";
        image.src = src;
        const body = document.querySelector("body")
        body.appendChild(image)
    }
    addImage(myImage)

如果沒有文件加載器，這段代碼將無法工作，但如果我使用圖像的路徑，那將可以工作......

addImage("./dist/kemo.jpg")

所以，我在這里問，如果我可以免除它，為什么文件加載器很重要？

Answer 1

好吧，文件加載器很重要，因為；

• 它將文件import解析為url ，並將文件發送到 output 目錄。
• 此外，使用 file-loader 加載的任何內容都包含在 webpack 的資產 JSON output 中，因此您可以在一個地方看到所有資產

入門

首先安裝文件加載器：

$ npm install file-loader --save-dev

然后讓你從 '../assets/img.jpg' 導入 myImage；

您必須將加載程序添加到您的 webpack 配置中。 例如：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

當您通過首選方法運行 webpack 時。 這將在 output 目錄中將 img.jpg 作為文件發出（如果指定了選項，則具有指定的命名約定）並返回文件的公共 URI。

ℹ️ 默認情況下，結果文件的文件名是文件內容的 hash 以及所需資源的原始擴展名。