Webpack 不会为生产 css 文件中的图像创建正确的路径答案

【问题标题】：Webpack doesn't create right paths for images in production css fileWebpack 不会为生产 css 文件中的图像创建正确的路径
【发布时间】：2018-11-23 17:00:04
【问题描述】：

要将图像添加到项目中，我正在使用 content: sass 文件中的 url() css 属性并指定 src 文件夹的相对路径，例如content: url('/images/right-arrow.svg');。

问题在于，在生产构建中，我需要去掉第一个斜杠，以便在捆绑的 css 文件中拥有这样的路径 ('images/right-arrow.svg')。

我可以获得所需行为的唯一方法是为css-loader 使用url: false 选项，并在sass 文件中写入不带斜线的路径：content: url('/images/right-arrow.svg')，但此类选项不会从node_modules 添加必要的文件，例如字体和图像。

Webpack 配置：

return {
entry: ['babel-polyfill', './src/app.js'],
output: {
  path: path.join(__dirname, 'public/'),
  filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
  rules: [
    {
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },

    {
      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: true
          }
        },
        'sass-loader'
      ]
    },

    {
      test: /\.(svg|gif|png)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images'
        }

      }
    },

    {
      test: /\.(otf|woff2|ttf|eot|woff)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/'
        }
      }
    }

  ]
}

我在 webpack 配置中缺少什么来实现正确工作的路径？

【问题讨论】：

标签： reactjs webpack sass css-loader

【解决方案1】：

好的，我已经解决了这个问题。在@Ujin 建议使用它之前，我使用resolve-url-loader 没有结果。在他发表评论后，我澄清了 resolve-url-loader 所做的事情并正确地配置了它以解决我的问题。主要问题是我错过了阅读 resolve-url-loader 文档的重要段落，其中说：

resolve-url-loader 之前的加载器所需的源映射（无论开发工具如何）。

我也没有使用 resolve-url-loader 插件的 root 选项。因此，.scss 文件的 webpack 配置如下所示：

      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        'css-loader',
        {
          loader: 'resolve-url-loader',
          options: {
            root: path.join(__dirname, 'src')
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            sourceMapContents: false
          }
        }
      ]
    }

【讨论】：

【解决方案2】：

查看documentation 关于url(...) 的问题。它建议使用resolve-url-loader。

你也可以尝试使用copy-webpack-plugin

【讨论】：

文件被正确复制到公用文件夹，主要问题是这些文件的路径。