Webpack 文件加载器发出的 png 名称与发出的名称不同 bundle.js

Question

我正在尝试通过一个简单的练习项目来了解 Webpack 文件加载器。我在 ./src 中放置了 icon.png，以及 index.js 和 style.css（根据 https://webpack.js.org/guides/asset-management/）。在运行 webpack 之后（通过 yarn build or watch scripts）我没有得到任何错误，并且实际上在 ./dist 中得到了一个名为 a0cadc7b7cbb7dd92495c1d9567c52e7.png 的文件。但是，在开发工具 (dista0cadc7b7cbb7dd92495c1d9567c52e7.png) 中检查时生成的包引用的文件是不同的，因此它根本没有加载。

这真是令人费解...有解决这个问题的想法吗？

webpack.config.js

const path = require("path");

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        use: [
          'file-loader'
        ],
      },
    ],
  },
};

index.js

import sayHello from './hello';
import './style.css';
import icon from './icon.png';
sayHello();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "Hello from webpack!";
  element.classList.add("hello");


  const myIcon = new Image();
  myIcon.src = icon;
  element.appendChild(myIcon);
  return element;
}

document.body.appendChild(component());

style.css

.hello {
  color: red;
  background-image: url('./icon.png');
}

另外：package.json

{
  "name": "webpack-practice",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress -p",
    "watch": "webpack --progress --watch",
    "server-c9": "webpack-dev-server --host 0.0.0.0 --port 8080 --progress"
  },
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "css-loader": "^3.4.0",
    "file-loader": "^5.0.2",
    "style-loader": "^1.1.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

更新： 我在 webpack.config.js 中注释掉了 publicPath 并使其正常工作......但如果没有它，我就失去了 webpack-dev-server 中的实时重新加载......现在这是我遇到这种意外行为的第一个主题...... .

Answer 1

看来您在 webpack 配置中错误地使用了 publicPath。您可以暂时删除它或替换为默认值 "./"

请阅读this了解更多详情

Answer 2

我遇到了同样的问题。根据https://webpack.js.org/guides/asset-management/#loading-images，我去掉了

use: [
      'file-loader'
    ],

来自 webpack.config.js。相反，添加了

type: 'asset/resource',

它对我有用。但是，如果我使用 file-loader，图像将不会显示。

Webpack 文件加载器发出的 png 名称与发出的名称不同 bundle.js

Webpack file-loader emits png with different name than the one referenced in emitted bundle.js

javascript

css

webpack

webpack-dev-server

webpack-file-loader