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

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

索引.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());

风格.css

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

另外：包.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

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

use: [
'file-loader'
],

从webpack.config.js.相反，添加

type: 'asset/resource',

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

Answer 2

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

请阅读此内容以获取更多详细信息