reactjs - 如何允许使用 React Webpack 在我的 css 中设置相对路径？

Question

我是 Webpack 的新手，所以我希望这个问题是可以理解的，我已尝试将其格式化为易于阅读。
我正在使用 webpack 构建我的 React 应用程序，我终于弄清楚了如何输出我的图像文件夹结构并遇到了另一个障碍。
我希望你能帮助我。

输出的 dist 文件夹结构如下:

我不确定为什么，但在开发中我必须以特定方式引用 background-image url 路径。问题是在运行 webpack 之后，我输出的分发版本似乎不喜欢图像文件路径不是相对的。

在开发中，我的 css 是这样设置的:
背景:url('/img/site/placeholder.jpg');
该构建在开发中运行良好，但在生产中找不到图像文件:
获取文件:///img/site/placeholder.jpg net::ERR_FILE_NOT_FOUND

我可以更新缩小后的 bundle.js，这样 css 使用相对路径，如下所示:
背景:url('./img/site/placeholder.jpg');
这仅适用于生产而不适用于开发。

如果我运行 webpack 来输出我的 React 构建以使用 css 中的相对路径 (./img/) 进行分发，我会收到此错误:
./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./scss/styles.scss 中的错误
找不到模块:错误:无法在“/Users/moehammo/Documents/_Moe/00_MHC/conceptual_website_react/scss”中解析“./img/site/placeholder.jpg”
@ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./scss/styles.scss 6:6248-6285
@./scss/styles.scss
@./index.js

我已经尝试在我的 webpack.config.js 文件中使用 publicPath: "./" 但它会抛出我的构建，我想我可能正在实现它不正确。我在这个难题中错过了什么？

我的 webpack.config.js 文件如下:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const sass = require('node-sass');
const path = require('path');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test:/\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets:['env','react']
          }
        }
      },
      {
        test: /\.scss$/,
          use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }]
      },
      {
        test: /\.(png|jpg|gif)$/,
          use: [{
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]'
            }
          }]
     }
    ],
    loaders: [
     { test: /\.json$/, loader: 'json' }
     // other loaders
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

我很感激任何帮助。

谢谢

Answer 1

一种可能性是使用 url-loader，它会将文件转换为 base64 字符串，在需要时将其直接应用于您的图像文件。

// regular js file
import img from './image.png'
console.log(img);

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
        {
          loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

如果您想继续使用 file-loader，请尝试使用加载器配置中的 outputPath 属性，以匹配生产构建文件夹的位置。您的生产应用可能正在尝试访问您的“dist”文件夹中不存在的文件。

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: 'images/'
  }
}