Webpack禁用输出图像文件名哈希。

Question

在构建我的Angular4应用程序之后，Webpack将我的图像名称从bg_node_new.png更改为bg_node_new.3746bc3ac9b1bf77d2aff2c2df901a48.png。

我的Webpack配置代码是：

(function(module) {

    const path = require('path');
    const npm_cmd = process.env.npm_lifecycle_event;
    const p = !(require('yargs').argv.p || false);
    let config;

    module.exports = function(env) {

        let cmds = npm_cmd.split(":");
        const cmd = cmds.length >= 2 ? cmds[1] : null;
        const mod = cmds.length >= 3 ? cmds[2] : null;
        const aot = cmds.length >= 4 ? cmds[3] : null;

        const options = {
            p:!p,
            mod:mod,
            aot:aot,
            env:env,
            ngv:2,
            ctx:path.resolve(__dirname, "../../../../..")
        }
        //console.log(options);

        switch (cmd) {
          case 'app': 
            console.log("Building app");
            config = require('./wp.app')(options);
            break;
          case 'lib': 
            console.log("Building lib");
            config = require('./wp.lib')(options);
            break;
          case 'mod':
            console.log("Building mod");
            config = require('./wp.mod')(options);
            break
          default:
            console.log("Building app");
            config = require('./wp.app')(options);
            break;
        }

        return config;
    }

})(module);

由于这个问题，我的应用程序中的图像无法渲染。如何解决这个问题？

提前感谢！

- Saravana

---

你可以在webpack中禁用它。分享你的webpack配置。 - FAISAL

请查看此链接（https://dev59.com/rFoU5IYBdhLWcg3wO1MV）或此链接（https://dev59.com/G5nga4cB1Zd3GeqPTRWE），以帮助您解决问题。 - Elmer Dantas

和其他的webpack配置 - FAISAL

我有 wp.app.js、ap.base.js、wp.lib.js、wp.mode.js 和 wp.test.js。 - Saravana

你可以查看此链接 - https://embed.plnkr.co/mlNmg8qP9DEhwNktZNc7/ - Saravana

Answer 1

根据OP的评论更新：

在你的`wp.base.js`中，从以下内容中删除`[hash]`：

const raw_file_loader = {
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|otf)$/,
    use: 'file-loader?name=assets/[name].[ext]'
}

这是一个HTML标签，表示水平分割线。

{
  test: /.*\.(gif|png|jpe?g|svg)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '/images/[name]_[hash:7].[ext]',
      }
    },
  ]
}

...并移除[hash]部分，只需要保留如下内容:

name: '/images/[name].[ext]',

- FAISAL

Answer 2

这是因为 Angular 在构建时进行哈希处理，以防止这种情况的发生，前提是您正在使用 Angular CLI。

 ng build --prod --output-hashing none

- Rahul Singh

---

谢谢回答。我们没有使用Angular CLI :( - Saravana

@Sarav 你在用什么？ - Rahul Singh

@Rahul，webpack - FAISAL

@Sarav cli现在也使用webpack，所以我对此感到很困惑。 - Rahul Singh

是的，我知道，但他正在使用webpack.config。 - FAISAL

Answer 3

为了解决React项目中的问题，我将webpack.config.js设置如下：

module: {
    rules: [
        {
            test: /\.(png|svg|jpg|gif)$/,
            loader: "file-loader",
            options: {
                name: 'images/[name].[ext]',
            },
        }
    ]
},

- Michael Klishevich

Answer 4

你可能还需要在你的 HTML 加载器中关闭源处理

            {
            test: /\.html$/i,
            use: [
                {
                    loader: 'html-loader',
                    options: { minimize: false, sources: false }
                }
            ]
        }

- William