Webpack 为项目中的图像创建哈希文件名答案

【问题标题】：Webpack creating hashed file names for images in projectWebpack 为项目中的图像创建哈希文件名
【发布时间】：2019-04-12 01:15:50
【问题描述】：

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

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

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 时遇到了困难。任何有关这些问题的帮助将不胜感激。

【问题讨论】：

标签： javascript webpack

【解决方案1】：

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

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

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

【讨论】：

不行，这个行得通：stackoverflow.com/a/38469968/1243247

【解决方案2】：

我遇到了同样的哈希资源问题，添加 file-loader 只会重复构建，此外，新 webpack 版本的自动资产管理会覆盖 file- loader .css 文件中资源的 URL，所以图像根本没有显示，如果你是这种情况，那么你可以在 Webpack 网站上关注instructions here。

你只需要在webpack.config.js的输出中添加这个prop，如果你使用它，注释文件加载器。

    output: {
       ...
       assetModuleFilename: "[name][ext]",
    },

【讨论】：