Question

构建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);

因此，我的应用中的图片无法呈现。如何解决这个问题？

提前致谢！

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

原文答案：

如果您分享您的webpack配置，我将更好地回答。但是，在webpack.config，

中查找此类配置

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

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

名称：＆＃39; / images / [name]。[ext]＆＃39;，

Answer 2

这是因为在构建时Angular确实停止使用，只要您使用Angular CLI

$cards_array = array();
$ranks = array('a',2,3,4,5,6,7,8,9,10,'j','q','k');
$suits = array('heart', 'spade', 'diamond', 'club');

foreach ($suits as $suit) {
    foreach($ranks as $rank) {
        $cards_array[] = new Card($rank, $suit);
    }
}

var_dump($cards_array);

class Card {
    //properties
    private $suit;
    private $rank;

    //constructor
    public function __construct($r, $s) {
        $this->rank = $r;
        $this->suit = $s;
    }

    //methods
    public function getSuit() {
        return $this->suit;
    }

    public function getRank() {
        return $this->rank;
    }
}

Answer 3

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

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

Answer 4

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

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

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

4 个答案: