那些遇到过的问题

图像未加载到 webpack 中 + 图像输出文件夹之外还有另一个图像

dam*_*era 6 html javascript backend webpack

图像未加载到 webpack 中，+图像输出文件夹之外还有另一个图像。

我尝试了很多解决方案，但没有成功。在第二张图片中，有一个导出标签“export default "./media/hero-bg.png";” 在构建文件夹索引 Html webpack 中，使用另一个哈希名称在构建文件夹之外添加了图像。

const path = require("path")
const react = require("react")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        menu: ['babel-polyfill', './src/index.js'],
        main:'./index.js'
    },
    output:{
        path: path.resolve(__dirname, 'build'),
        assetModuleFilename: "[name].[ext]",
    },
    // devtool:"inline-source-map",
    devServer:{
        port: 3130,
        static: true,
    },
    module: {
        rules: [
            {
                test: /\.m?js$|jsx/,
                exclude: /node_module/,
                use: {
                    loader:"babel-loader",
                    options: { presets: ['@babel/preset-env','@babel/preset-react']},
                    
                },
            },
            {
                test: /\.css$/,
                exclude: /node_module/,
                use: ["style-loader","css-loader"]
            },
            {
                test: /\.html$/i,
                exclude: /node_module/,
                loader: "html-loader",
            },
            {
                test: /\.scss$/,
                exclude: /node_module/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ]   
            },
            {
                test: /\.jpeg|jpg|png|svg$/,
                exclude: /node_module/,
                type: "asset/resource",
                use: {
                    loader:"file-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "media/",
                        publicPath:"./media/"
                
                    }
                }
            },
            // file loader 
            
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
          "React": "react",
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename:"menu.html",
            inject: "body"
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            inject: "body"
          }),
      ],
    

}



 html
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Coffee House/HomePage</title>
    <!-- swiper carousel  -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
    <!-- normalize styles  -->
    <link rel="stylesheet" href="./src/css/slider.css" />
    <!-- carousel stylesheet -->
    <link rel="stylesheet" href="./src/css/carousel.css" />
    <!-- main stylesheet  -->
    <link rel="stylesheet" href="./src/css/index.css" />
    <!-- common styles  -->
    <link rel="stylesheet" href="./src/css/commonStyles.css" />
    <link
      href="./src/css/stylesheet.css"
    />

  </head>
  <body>
      <!-- nav bar -->
      <nav class="nav-wraper">
        <div class="custom--container nav">
          <!-- left sec  -->
          <div class="nav__left-sec">
            <a href="/" class="logo-img-wraper">
              <img src="./src/images/logo-dark.png" alt="navlogo" class="nav__left-logo"/>
            </a>
          </div>
          <!-- right sec  -->
          <div class="nav__right-sec">
            <button class="toggle-btn responsive" id="toggleBtn">
              <svg xmlns="http://www.w3.org/2000/svg" width="30.75" height="25" viewBox="0 0 30.75 25">
                <g id="Group_886" data-name="Group 886" transform="translate(-304.25 -30)">
                  <line id="Line_1" data-name="Line 1" x2="30.75" transform="translate(304.25 32.5)" fill="none" stroke="#000" stroke-width="5"/>
                  <line id="Line_2" data-name="Line 2" x2="30.75" transform="translate(304.25 42.5)" fill="none" stroke="#000" stroke-width="5"/>
                  <line id="Line_3" data-name="Line 3" x2="30.75" transform="translate(304.25 52.5)" fill="none" stroke="#000" stroke-width="5"/>
                </g>
              </svg>            
            </button>
            <div class="nav__right-sec-nav-wraper">
              <ul class="nav__right-sec-nav">
                <img src="./src/images/logo-dark.png" class="sidebar-logo" alt="logo"/>
                <li><a href="/">Home</a></li>
                <li><a href="/menu">Menu</a></li>
                <li><a href="#footer">Locations</a></li> 
                <li><a href="#footer">Contact Us</a></li> 
              </ul>
            </div>
          </div>
        </div>
      </nav>
      <div class="sidebar--overlay" id="sidebar--overlay"></div>

      <!-- hero  -->
      <section>
        <div class="hero">
          <div class="custom--container">
            <div class="hero__content">
              <div class="hero__heading">
                <div>THE CAFFEE</div>
              </div>
              <p class="hero__para para-spacer">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et dolore magna aliqua. Ut enim
              </p>
              <button class="btn">our menu</button>
            </div>
          </div>
        </div>
      </section>

      <!-- our products -->
      <section>
        <div class="ourProducts section-spacer">
          <div class="">
            <!-- top  -->
            <div class="ourProducts__top">
              <div class="custom--container">
                <div class="ourProducts__top-info">
                  <h1 class="ourProducts__top-info-heading section-main-heading">
                    best products from all around the world
                  </h1>
                  <p class="ourProducts__top-info-para para-spacer">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                    sed do eiusmod tempor incididunt ut labore et dolore magnaLorem 
                    ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  </p>
                  <button class="btn">Our Menu</button>
                </div>
              </div>
              <div class="ourProducts__top-ref-img-wraper">
                <div class="ourProducts__top-ref-img">
                  <img src="./src/images/ourProducts-ref-img.png" alt="ref image"/>
                </div>                
              </div>
            </div>
            <!-- bottom  -->
            <div class="ourProducts__bottom custom--container">
              <div class="ourProducts__bottom-top">
                <h1 class="section-main-heading ourProducts__bottom-top-heading">our products</h1>
                <p class="ourProducts__bottom-top-para para-spacer">
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                  sed diam nonumy eirmod tempor invidunt
                </p>
              </div>
              <div class="ourProducts__bottom-bottom">
                <div class="ourProducts__bottom-bottom-items">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide item">
                        <img src="./src/images/ourProducts-bevarages.png" alt="item img"/>
                      </div>
                      <div class="swiper-slide item">
                        <img src="./src/images/ourProducts-pastries.png" alt="item img"/>
                      </div>
                      <div class="swiper-slide item">
                        <img src="./src/images/ourProducts-coffee.png" alt="item img"/>
                      </div>
                      <div class="swiper-slide item">
                        <img src="./src/images/ourProducts-pastries.png" alt="item img"/>
                      </div>
                    </div>
                  </div>
                  <div class="carousel-btns">
                    <div class="carousel-btn prevBtn" id="ourProducts-prev">
                      <svg xmlns="http://www.w3.org/2000/svg" width="69.119" height="69.119" viewBox="0 0 69.119 69.119">
                        <g id="Group_1040" data-name="Group 1040" transform="translate(2974.001 -2545.999)">
                          <circle id="Ellipse_3" data-name="Ellipse 3" cx="34.56" cy="34.56" r="34.56" transform="translate(-2974.001 2545.999)" fill="#1b5d40"/>
                          <path id="Path_362" data-name="Path 362" d="M0,12.8,12.8,0,25.6,12.8" transform="translate(-2945.521 2593.676) rotate(-90)" fill="none" stroke="#fff" stroke-width="10"/>
                        </g>
                      </svg>                    
                    </div>
                    <div class="carousel-btn nextBtn" id="ourProducts-next">
                      <svg xmlns="http://www.w3.org/2000/svg" width="69.119" height="69.119" viewBox="0 0 69.119 69.119">
                        <g id="Group_1043" data-name="Group 1043" transform="translate(4325.365 -6368.94)">
                          <g id="Group_1042" data-name="Group 1042" transform="translate(-7230.247 8984.059) rotate(180)">
                            <circle id="Ellipse_3" data-name="Ellipse 3" cx="34.56" cy="34.56" r="34.56" transform="translate(-2974.001 2545.999)" fill="#1b5d40"/>
                            <path id="Path_362" data-name="Path 362" d="M0,12.8,12.8,0,25.6,12.8" transform="translate(-2945.521 2593.676) rotate(-90)" fill="none" stroke="#fff" stroke-width="10"/>
                          </g>
                        </g>
                      </svg>                    
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
        
      <!-- about us section  -->
      </section>
        <div class="aboutUs section-spacer">
          
          <div class="paper-effect-top-wraper">
            <img src="./src/images/paper-effect.svg" class="paper-effect"/>            
          </div>
          <div class="paper-effect-bottom-wraper">
            <img src="./src/images/paper-effect-bottom.svg" class="paper-effect"/>            
          </div>

          <div class="custom--container">
            <div class="aboutUs__row aboutUs__row-left" id="aboutUs__row1">
              <div class="aboutUs__row-img">
                <img src="./src/images/aboutUs-row1.png" alt ="about us img"/>
              </div>
              <div class="aboutUs__row-texts">
                <h2 class="aboutUs__row-texts-heading">
                  We started The Caffee In <span class="aboutUs-highlight">1998</span>
                </h2>
                <p class="aboutUs__row-texts-para">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magnaLorem 
                  ipsum
                </p>
              </div>
            </div>

            <div class="aboutUs__row-divide-line"></div>           

            <div class="aboutUs__row aboutUs__row-center" id="aboutUs__row2">
              <div class="aboutUs__row-img">
                <img src="./src/images/aboutUs-row2.png" alt ="about us img"/>
              </div>
              <div class="aboutUs__row-texts">
                <h2 class="aboutUs__row-texts-heading">
                  Trying <span class="aboutUs-highlight">our</span> Best 
                </h2>
                <p class="aboutUs__row-texts-para">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magnaLorem 
                  ipsum dolor sit amet
                </p>
              </div>
            </div>

            <div class="aboutUs__row-divide-line"></div>      

            <div class="aboutUs__row aboutUs__row-right" id="aboutUs__row3">
              <div class="aboutUs__row-img">
                <img src="./src/images/aboutUs-row3.png" alt ="about us img"/>
              </div>
              <div class="aboutUs__row-texts">
                <h2 class="aboutUs__row-texts-heading">Making A <span class="aboutUs-highlight">Difference</span></h2>
                <p class="aboutUs__row-texts-para">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magnaLorem 
                  ipsum dolor sit amet, consectetur adipiscing elit, sed do
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- testimonals  -->
      <section>
        <div class="testimonials">
          <div class="section-spacer custom--container">
            <div class="testimonials__top">
              <h1 class="testimonals__heading section-main-heading">Testimonials</h1>
            </div>

            <div class="testimonials__bottom">
              <div class="testimonials__bottom-testimonials">
                <div class="swiper-testimonial">
                  <div class="swiper-wrapper para-spacer">
                    <div class="testimonials__bottom-testimonial-wraper swiper-slide">
                      <p class="testimonials__bottom-testimonial">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore 
                        magnaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                      </p>
                      <div class="testimonials__bottom-testimonial-reviewer">alex matt</div>
                    </div>
                    <div class="testimonials__bottom-testimonial-wraper swiper-slide">
                      <p class="testimonials__bottom-testimonial">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore 
                        magnaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                      </p>
                      <div class="testimonials__bottom-testimonial-reviewer">alex matt</div>
                    </div>
                    <div class="testimonials__bottom-testimonial-wraper swiper-slide">
                      <p class="testimonials__bottom-testimonial">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore 
                        magnaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                      </p>
                      <div class="testimonials__bottom-testimonial-reviewer">alex matt</div>
                    </div>
                  </div>
                </div>
                <!-- btns  -->
                <div class="carousel-btn-wraper">
                  <div class="carousel-btn testimonials__carousel-btn prevBtn" id="testimonials-prevBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="69.119" height="69.119" viewBox="0 0 69.119 69.119">
                      <g id="Group_1040" data-name="Group 1040" transform="translate(2974.001 -2545.999)">
                        <circle id="Ellipse_3" data-name="Ellipse 3" cx="34.56" cy="34.56" r="34.56" transform="translate(-2974.001 2545.999)" fill="#1b5d40"/>
                        <path id="Path_362" data-name="Path 362" d="M0,12.8,12.8,0,25.6,12.8" transform="translate(-2945.521 2593.676) rotate(-90)" fill="none" stroke="#fff" stroke-width="10"/>
                      </g>
                    </svg>                    
                  </div>
                  <div class="carousel-btn nextBtn testimonials__carousel-btn" id="testimonials-nextBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="69.119" height="69.119" viewBox="0 0 69.119 69.119">
                      <g id="Group_1043" data-name="Group 1043" transform="translate(4325.365 -6368.94)">
                        <g id="Group_1042" data-name="Group 1042" transform="translate(-7230.247 8984.059) rotate(180)">
                          <circle id="Ellipse_3" data-name="Ellipse 3" cx="34.56" cy="34.56" r="34.56" transform="translate(-2974.001 2545.999)" fill="#1b5d40"/>
                          <path id="Path_362" data-name="Path 362" d="M0,12.8,12.8,0,25.6,12.8" transform="translate(-2945.521 2593.676) rotate(-90)" fill="none" stroke="#fff" stroke-width="10"/>
                        </g>
                      </g>
                    </svg>                    
                  </div>
                </div>
              </div>             
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="newsletter">
          <div class="custom--container section-spacer newsletter__content">
            <div class="newsletter__left">
              <h1 class="newsletter__heading section-main-heading">subscribe</h1>
              <h3 class="newsletter__subHeading">subscribe to our newsletter</h3>
              <p class="newsletter__para para-spacer">
                Lorem ipsum dolor sit amet, consetetur 
                sadipscing elitr, sed diam nonumy eirmod tempor invidunt
              </p>
            </div>
            <div class="newsletter__right">
              <form class="newsletter__form">
                <input type="text" class="newsletter__input" placeholder="ENTER YOUR EMAIL" name="newsletter__email" id="newsletter__input"/>
                <button class="newsletter__btn" type="submit" id="newsletter__submit">Subscribe</button>
              </form>

归档时间：

查看次数：

399 次

最近记录：

4 年 前
相关归档
在作为Background-Image提供时修改SVG填充颜色 231
如何使用触控启用的浏览器模拟悬停？ 119
使用纯css打开/向上的下拉菜单 39
如何将img与文本内联 24
从CSS禁用Textarea 21
通过CSS替换不可用的图像？ 19
内联块div元素不按预期排列 18
Webpack 忽略 node-pre-gyp 文件 8
Heroku应用程序错误 - 部署时超出内存配额 - Scout显示4,804,423个分配 6
为什么使用webpack在源代码中显示原始源代码？以及如何禁用它？ 5
难疑归档
基于表单的网站身份验证的权威指南 5311
如何在C#中枚举枚举？ 3620
什么是__init__.py？ 2074
如何使div不大于其内容？ 1960
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
PowerShell说"在这个系统上禁用了脚本的执行." 1545
计算C#中的相对时间 1461
从JSON文件中解析值？ 1400
如何完全删除使用init创建的git存储库？ 1358
如何在Python中打印到stderr？ 1246
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号