Skip to main content

file-loader

file-loader​

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。

安装​

npm install --save-dev file-loader

快速开始​

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

import img from "./file.png";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },
    ],
  },
};

生成文件 file.png，输出到输出目录并返回 public URL。

"/public/path/0dcbbaa7013869e351f.png";