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

Question

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

\n\n

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

\n\n

root\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 client\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 components\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 database\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 images\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.html     \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 server\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 server.js\n

\n\n

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

\n\n

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

\n

Answer 1

我遇到了同样的散列资源问题，添加文件加载器只会重复构建，此外，具有散列名称的新 webpack 版本的自动资产管理会覆盖.css 文件中资源的文件加载器URL，因此图像根本没有显示，如果您遇到这种情况，那么您可以按照Webpack 网站上的说明进行操作。

如果使用它，您只需在webpack.config.js 的输出中添加此属性并注释文件加载器。

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