在构建项目时，由于相对路径，webpack会给出错误

如何解决在构建项目时，由于相对路径，webpack会给出错误

我无法建立项目。给出错误消息。

相对路径引发错误（../，../../，./不起作用） background-image: url('./images/facebook-places.svg');

绝对路径是可行的！ background-image: url('http://localhost:8080/images/facebook-places.svg');

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',output: {
    path: path.join(__dirname,'/dist'),filename: 'bundle.js'
  },module: {
    rules: [
      {
        test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
          loader: 'babel-loader'
        }
      },{
        test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']
      },{
        test: /\.css$/,use: ['style-loader','css-loader']
      }
    ]
  },plugins: [
    new CleanWebpackPlugin(),new CopyPlugin({
      patterns: [
        {
          from: './public/images',to: './images'
        }
      ]
    }),new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],devtool: 'source-map',resolve: { extensions: ['.js','.jsx'] }
};

组件

import React from 'react';

import './header.css';

const Header = () => {
  return (
    <header className="header">
      <div className="header__date">
        <span className="header__time">Sunday,19 May 2019 | 4:30PM</span>
      </div>
      <div className="header__location">
        <a href="/#" className="header__city">Mumbai,India</a>
      </div>
    </header>
  );
};

export default Header;

css

.header {
  display: flex;
  justify-content: space-between;
}

.header__city::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  background-image: url('./images/facebook-places.svg');
  background-size: 100% 100%;
}

错误

ERROR in ./src/components/header/header.css (./node_modules/css-loader/dist/cjs.js!./src/components/header/header.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './images/facebook-places.svg' in 'C:\Users\user\Desktop\Projects\weather-app\src\components\header'
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\Resolver.js:209:21
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\user\Desktop\Projects\weather-app\node_modules\tapable\lib\HookCodeFactory.js:33:10),<anonymous>:15:1)
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\user\Desktop\Projects\weather-app\node_modules\tapable\lib\HookCodeFactory.js:33:10),<anonymous>:15:1)
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\user\Desktop\Projects\weather-app\node_modules\tapable\lib\HookCodeFactory.js:33:10),<anonymous>:27:1)
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\user\Desktop\Projects\weather-app\node_modules\tapable\lib\HookCodeFactory.js:33:10),<anonymous>:16:1)
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\Resolver.js:285:5
    at eval (eval at create (C:\Users\user\Desktop\Projects\weather-app\node_modules\tapable\lib\HookCodeFactory.js:33:10),<anonymous>:16:1)
    at C:\Users\user\Desktop\Projects\weather-app\node_modules\enhanced-resolve\lib\Resolver.js:285:5
 @ ./src/components/header/header.css 2:26-96 43:4-64:5 46:18-88
 @ ./src/components/header/header.jsx
 @ ./src/components/app/app.jsx
 @ ./src/index.js

地图

dist
public
      \
       images
       index.html
src
   \
    index.js
    components
              \
               header
                     \
                      header.css
                      header.jsx
.babelrc
.eslintrc.yml
package.json
package-lock.json
webpack.config.js

解决方法

这是 background-image: url('/public/images/facebook-places.svg');的唯一工作方式。它在Dist中找不到图片。