javascript - Webpack 找不到动态(js)添加的背景图片

Question

所以我已经在我的投资组合页面上工作了一段时间。在从文档中进行了简短的速成类(class)后，我正在使用 webpack，并且在遇到障碍时一直在学习。

我在这个元素中注意到的第一个问题是 dist 文件夹中没有任何内容，即使 CLI 显示构建成功。

主要问题是，当我通过js 添加CSS 背景图片时，显示404 错误(它找不到图片文件，尽管它在src 目录中)。通过控制台检查，很明显正在应用样式。

(其他一切似乎工作正常；因此这不是我的代码错误) 因此我觉得这是一个 webpack 问题，可能是文件加载器或样式加载器的问题我做了几个小时的大量故障排除，甚至删除并重新安装了 node_modules 文件夹

我将感谢所有贡献

这是 Github 存储库的链接(如果您有更多时间空闲):Github repo

这里是一些正在发生的事情的代码:

HTML:

  <div class="hero">
        <time class="time"></time>
        <h1 class="greeting">
            <span class="greeting-js"> </span> I'm Joel
        </h1>
        <h2 id="description"> a web developer</h2>
    </div>

CSS:

.hero {

    height: 100vh;
    width: 100vw;
    text-align: center;
    font-family: Lato, sans-serif;
    color: var(--text-sec);
}

dynamicHero.js:

const time = document.querySelector('.time');
const hero = document.querySelector('.hero');

const greetingJs = document.querySelector('.greeting-js');
const greeting = document.querySelector('greeting');



function setBg() {
    console.log(' I am Working')
    let today = new Date(),
        hour = today.getHours();

    //morning
    if (hour < 12) {
        hero.style.background = "url('./img/rippling-water-2257568 large.jpg')";
        greetingJs.textContent = 'Good Morning,'


    } else if (hour < 18) {
        hero.style.background = "url('./img/one-world-trade-center-under-cloudy-sky-during-daytime-161963.jpg)";
        greetingJs.textContent = 'Good Afternoon,'
    }
    else {
        hero.style.background = "url('./img/bonfire-burning-camp-campfire-1368382.jpg')"
        greetingJs.textContent = 'Good Evening'
    }
}


// Run functions
getTime();
addZero();
setBg();

index.js:

import './index.html';
import './style.css';
import './eyes';
import './dynamicHero';

Webpack Config(如您所见，我注释掉了 clean webpack 插件，因为它可能是导致此行为的罪魁祸首):

//require plugins
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// modules
module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js',
    },

    devServer: {
        contentBase: './dist',

    },
    module: {
        rules: [
            // babel 
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                use: [
                    {
                        // load with html loader and then minimize
                        loader: 'html-loader',
                        options: {
                            minimize: true,
                            interpolate: true,
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ],
            },
        ]
    },
    plugins: [
        /*   new CleanWebpackPlugin({
              cleanAfterEveryBuildPatterns: ['dist']
          }), */
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html',
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
            ignoreOrder: false,
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
        },

    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
}

Package.json:

{
    "name": "stealthportfolio",
    "version": "1.0.0",
    "description": "My portfolio page.",
    "main": "index.js",
    "scripts": {
        "build": "webpack",
        "start": "webpack-dev-server"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/stealthman22/StealthPortfolio.git"
    },
    "author": "",
    "license": "ISC",
    "bugs": {
        "url": "https://github.com/stealthman22/StealthPortfolio/issues"
    },
    "homepage": "https://github.com/stealthman22/StealthPortfolio#readme",
    "devDependencies": {
        "@babel/core": "^7.7.7",
        "@babel/preset-env": "^7.7.7",
        "babel-loader": "^8.0.6",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.4.0",
        "file-loader": "^5.0.2",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.9.0",
        "style-loader": "^1.1.1",
        "webpack": "^4.41.4",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1"
    }
}

Answer 1

我认为文件加载器插件要求您在 JS 中导入图像，而不仅仅是在 CSS 字符串中指定 URL。

import myImagePath from './img/rippling-water-2257568 large.jpg';

hero.style.background = `url(${myImagePath})`;