Webpack 网页包开发服务器将前缀添加到图像名称

webpack dev server正在将前缀“dist”添加到图像文件名中，而webpack-p没有添加前缀“dist”。我正在youtube上浏览Petr Tichy的教程，但我看不出问题出在我的

webpack.config.js

文件中。它没有将前缀添加到其他文件，只是图像文件名。你能看到这里有什么问题吗

    var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    module:{
       rules:  [
          {
            test: /\.scss$/, 
              use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader','sass-loader'],
                publicPath: '/dist'
              })
          },
            {

              test: /\.(gif|png|jpe?g|svg)$/i,
              use: 'file-loader'
            }   
         ]
    },
     devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9000,
        stats: "errors-only",
        open: true
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'The Title',
        minify: { 
          collapseWhitespace: true
        },
        hash: true,
        template: './src/index.ejs', // Load a custom template (ejs by default see the FAQ for details)
      }),
      new ExtractTextPlugin({
            filename: 'app.css',
            disable: false,
            allChunks: true
        })
    ]
}

下面是package.json文件：

{
  "name": "thename",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack-dev-server",
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.0.0-rc.0",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.3.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  }
}

---

正如您所说，publicPath:'/dist'，它会将dist添加到每个图像路径之前。。这是意料之中的行为。@Ravi谢谢你。但是为什么在每个图像路径之前，而不是在css之前呢？为什么只有图像？因为图像被视为资产。。。CSS是在编译SCSS/less之后构建的。即使对于字体，您也可以看到相同的行为。也。。您必须在SCS中导入这些图像，因此textextract插件为您提供了提供公共路径的功能。@Ravi啊，好的，这很有帮助。那么，除了为图像添加前缀之外，使用publicPath还有什么意义呢？因此，在ExtractTextPlugin中使用publicPath的唯一原因是在导入资产时避免使用相对路径。场景：当您为某个类使用背景图像时。现在，webpack试图通过查看url路径来捆绑资源。但在某些情况下，资源仅在prod服务器上可用。因此，不要给出这个publicPath配置，而是告诉Web包在资源之前附加绝对路径。