相关疑难解决方法(0)

我正在制作一个带有Webpack设置的React,我正在努力做一些看似应该是一个简单的任务.我希望webpack包含图像,并尽量减少它们,就像我吞咽一样,但我无法弄明白.我只是希望能够像我这样在我的CSS中链接图像:

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

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

我在src文件夹中包含了所有的css/js/img文件夹.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: …

我对webpack相当新,但是在使用css-loader或file-loader时遇到了一些问题.

我正在尝试加载背景图像,但它不能正常工作.尽管devtools显示了background-image样式,但未显示背景图像.

如果我将background-image样式复制到element.style块中,一切正常.我在某个地方犯了一个愚蠢的错误吗？

body标签应该有背景图片.该样式出现在开发人员工具中,没有错误:

我可以加载文件5a09e4424f2ccffb6a33915700f5cb12.jpg,但身体没有背景.

如果我element.style在DevTools中手动复制并粘贴css行,一切正常:

如果我在Chrome和Firefox中捆绑使用webpack-dev-server或仅使用它,就会发生这种情况webpack.

其他款式,如body { background-color: red }做工精细.

这是webpack.config.js:

const path = require('path');

module.exports = {
    "entry": [
        './src/index.js'
    ],
    "output": {
        "path": path.join(__dirname, 'build'),
        "filename": "bundle.js"
    },
    devtool: "source-map",
    "module": {
        "loaders": [
            {
                "test": /\.scss$/,
                "loaders": ["style", "css?sourceMap", "sass?sourceMap"]
            },
            { 
                test: /\.jpg$/, 
                loader: "file-loader" 
            }
        ]
    },
    devServer: {
        contentBase: './build'
    }
};