构建项目时，webpack由于相对路径而报错

Question

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

相对路径抛出错误（../、../../、./ 不起作用） 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
    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

Answer 1

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