Question

我正在将Webpack 4与文件加载器和开发服务器一起使用。文件加载器正在使用我的html进行工作，但是当我通过scss拉入背景图像时，它会抛出未找到的错误。该图像在建筑生产中也没有被拉到遥远的地方。

我的开发配置：

const path = require('path'),
      ASSET_PATH = process.env.ASSET_PATH || '/';

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: ASSET_PATH
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'assets/scss')],
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "sass-loader",
          options: {
            sourceMap: true
          }
        }]
      },
      {
        test: /\.html$/, 
        use: [{
          loader: "html-loader"
        }]  
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
    })
  ],
  devServer: {
    // static files served from here
    contentBase: path.resolve(__dirname, "./dist/assets/media"),
    compress: true,
    // open app in localhost:2000
    port: 2000,
    stats: 'errors-only',
    open: true
  },

  devtool: 'inline-source-map'

};

我的CSS：

body{
    background: url("/media/background.png");
}

我的文件结构：

webpack配置文件

package.json

src

app.js
index.html
资产
- 媒体
- - background.png
- app.scss

编译成功。在html中使用相同的图像。

在控制台中收到此错误： GET http://localhost:2000/media/webpacklogo.png 404（未找到）

我刚开始使用webpack。我现在已经建立了一些项目，但是从不需要背景图片，这是我遇到的第一个问题。

带有文件加载器和CSS的Webpack Dev Server

0 个答案: