Webpack 在输出时禁用图像名称的散列

Posted 2023-02-22

【中文标题】Webpack 在输出时禁用图像名称的散列

【英文标题】：Webpack disable hashing of image name on output

【发布时间】：2018-01-30 06:47:12

【问题描述】：

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

我的 webpack.config 代码是：

(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);

因此，图像未在我的应用程序中呈现。如何解决这个问题？

提前致谢！

【问题讨论】：

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

Look at this 或 this 看看是否能帮助您解决问题。

和其他 webpack 配置

我有 wp.app.js、ap.base.js、wp.lib.js、wp.mode.js、wp.test.js

你能在一些在线仓库上分享这些文件吗？ Github 例如？

【参考方案1】：

您可能还需要在 html 加载器中关闭源代码处理

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

【参考方案2】：

为了解决 React 项目中的问题，我这样设置 webpack.config.js

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

【参考方案3】：

在 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]'

---

原始答案：

如果你分享你的 webpack 配置，我会更好地回答。但是，请在您的 webpack.config 中找到这样的配置，

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

... 并删除 [hash] 部分。保持这样：

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

【参考方案4】：

这是因为 Angular 在构建时会进行哈希处理以停止使用，前提是您使用的是 Angular CLI

 ng build --prod --output-hashing none

【讨论】：

感谢您的回答。我们没有使用 Angular CLI :(

@Sarav 你在用什么？

@Rahul, webpack

@Sarav cli 现在也使用 webpack，所以我对它感到困惑

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