Question

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

Answer 1

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

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

如果您确实需要使用原始文件（不是Webpack生成的文件），您不应该使用文件加载器。
只需上传图像文件并对该文件进行img标签。

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

1 个答案: