Webpack 为项目中的图像创建散列文件名 [英] Webpack creating hashed file names for images in project

问题描述

在我的 client/components 文件夹中的一个组件中，我从 public/images 文件夹中导入了三个图像.在某些时候，webpack 为每个图像创建了一个文件，其散列名称如下所示:0e8f1e62f0fe5b5e6d78b2d9f4116311.png.如果我删除这些文件，它们不会被重新创建，我希望 webpack 只使用图像文件夹中提供的图像.

In one of the components in my client/components folder, I am importing three images from the public/images folder. At some point, webpack created a file for each of the images with hashed names like the following: 0e8f1e62f0fe5b5e6d78b2d9f4116311.png. If I delete those files, they do not get recreated and I would like for webpack to just use the images that are provided in the images folder.

现在，我正在尝试在代理服务器上部署应用程序，并且在页面加载时成功下载了哈希文件，但没有显示图像.我有一种预感，修复原始 webpack 问题将修复代理服务器的问题，但我也不确定.

Now, I am trying to deploy the application on a proxy server and the hash files are being successfully downloaded on page load but the images are not displaying. I have a hunch that fixing the original webpack issue will fix the issue with the proxy server but I'm not sure about that either.

root
├── client
│   └── components
├── database
├── public
│   ├── images
│   ├── app.js
│   └── index.html     
└── server
    └── server.js

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './client/index.js'),
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'env']
        },
      },
      { 
        test: /\.png$/,
        use: 'file-loader'
      }
    ],
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'app.js',
  }
};

以上是我的文件结构.我尝试使用我当前的配置，但我在设置 webpack 时遇到了困难.对这些问题的任何帮助将不胜感激.

The above is my file structure. I've tried to play around with my current config but I struggle with setting up webpack. Any help with these issues would be appreciated.

推荐答案

您可以使用以下选项保留原始文件名/路径.

You can keep original filename/path with the following option.

{
  test: /\.png$/,
    loaders: 'file-loader',
    options: {
      name: '[path][name].[ext]',
    },
},

如果你真的需要使用原始文件(不是webpack生成的文件)，你不应该使用文件加载器.
只需上传图像文件并制作该文件的 img 标签.

If you really need to use original file(Not webpack generated file), you should not use file-loader.
Just upload image file and make img tag of that file.

这篇关于Webpack 为项目中的图像创建散列文件名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！