如何在Webpack中使用CSS中的图片

Question

我正在制作一个使用React和Webpack的设置，但在完成看似简单的任务时遇到了困难。我希望Webpack能够包含图像，并像使用gulp那样将它们最小化，但我无法弄清楚。我只想能够像这样在我的CSS中链接一张图片：

/* ./src/img/background.jpg */

body { background: url('./img/background.jpg'); }

我将所有的css/js/img文件夹放在src文件夹中。Webpack输出到dist文件夹，但我无法弄清如何将图像输出到那里。

这是我的webpack设置：

 var path = require('path');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: [
   'webpack-dev-server/client?http://localhost:8080',
   'webpack/hot/dev-server',
   './src/index.js'
  ],
  output: {
  path: path.join(__dirname, 'dist'),
  //  publicPath: './dist',
  filename: 'bundle.js'
  },
  plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
  template: './src/index.html'
   })
  ],
  module: {
  loaders: [{
   exclude: /node_modules/,
   test: /\.js?$/,
   loader: 'babel'
   }, {
  test: /\.scss$/,
  loader: 'style!css!sass'
    }, {
  test: /\.(png|jpg)$/,
  loader: 'file-loader'
  }]
 },

 devServer: {
  historyApiFallback: true,
  contentBase: './dist',
  hot: true
  }
};

- user3737841

Answer 1

我曾遇到类似的问题，发现你可以使用url-loader来解决CSS中"url()"语句的问题，就像处理其他require或import语句一样。

安装它：

npm install url-loader --save-dev

这会安装一个能将解析后的路径转换为BASE64字符串的加载器。

在webpack配置文件中，在loaders中使用url-loader。

{
  test: /\.(png|jpg)$/,
  loader: 'url-loader'
}

同时确保您正确指定了公共路径和要加载的图像路径。

- WitVault

---

我的webpack-dev服务器从/dist目录提供服务，而我的图像文件在/src目录中，你知道我该如何在css文件中引用这些图像吗？这些图像是否应该与我的bundle.js一起打包？我不确定如何将它们移到/dist目录，因为/dist目录只是webpack-dev-server提供的虚拟目录。 - user3737841

你可以在样式表中使用require函数来引入图片。例如，background-image: url('../assets/img/logo-dark.png')。你需要尝试调整路径以确保正确引用。 - Alex Klibisz

不使用内联图像是否可以实现相同的最终结果？理想情况下，应该将图像复制到dist文件夹中，保留相同的相对路径。这可行吗？ - VariableContent

@VariableContent 是的，只需使用file-loader。 图像将被复制到输出文件夹中。 - Skay

@VariableContent 顺便提一下，url-loader 有一个选项叫做 limit，如果图片大小超过限制，它会将其解析为 URL 而不是 Base64 字符串。 - SMSk

Answer 2

在scss文件中使用background-image: url('./img/background.jpg')对我有效，无需使用url-loader。只需要file-loader来处理.png|.jpg|...等文件。

- Saloni Yadav

---

该OP明确解释说，这对他们不起作用。 - GalAbra

Answer 3

如果你是从Google搜索过来的，而且在你的webpack（5.x）版本中，file-loader和url-loader都无法正常工作，那么这里有一个简单的方法，由@SomoKRoceS回答：https://dev59.com/KsLra4cB1Zd3GeqPPLJt#69906036

{
  test: /\.(jpg|png|svg|gif)$/,
  type: 'asset/resource',
},

- Konrad Gałęzowski