ExtractTextPlugin为图像提供了错误的路径

Question

我在使用Webpack编译sass时遇到了麻烦。 ExtractTextPlugin为图像提供错误的路径，在其前面加上'css /'。当我将ExtractTextPlugin选项中的文件名更改为'/app.css'时，它会将app.css放入dist /文件夹而不是css，但它会为图像提供正确的路径。我该如何在config中正确指定路径？

这是我的webpack.config.js：

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

let isProd = process.env.NODE_ENV == 'production';
let cssDev = [
'style-loader', 
'css-loader?sourseMap&importLoaders=2', 
'postcss-loader', 
'sass-loader'];

let cssProd = ExtractTextPlugin.extract({
    allChunks: true,
    fallback: "style-loader",
    use: [
            {
                loader: 'css-loader',
                options: {
                    minimize: false,
                    importLoaders: 2
                }
            },
            {
                loader: 'postcss-loader',
                options: {
                    minimize: false
                }
            },
            {
                loader: 'sass-loader',
                options: {
                    minimize: false
                }
            }
    ]
});

let cssConfig = isProd ? cssProd : cssDev;

module.exports | webpack.config

module.exports = {
  entry: {
      'js/app': './src/app.js'
  },

  output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].js',
      publicPath: path.join(__dirname, 'dist')
  },

  module: {
      rules: [
          {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              include: [ path.resolve(__dirname, 'src/js/') ],
              loader: 'babel-loader',
              query: {
                  presets: ['es2015'],
              }
          },
          {
              test: /\.sass$/,
              use: cssConfig
          },
          {
              test: /\.pug$/,
              use: 'pug-loader?pretty=true'
          },
          {
              test: /\.(jpe?g|png|gif|svg)$/,
              use: [
                  'file-loader?name=[name].[ext]&publicPath=img/&outputPath=img/'
              ]
          },
          {
              test: /\.(eot|svg|ttf|woff|woff2)$/,
              use: 'file-loader?name=[name].[ext]&publicPath=fonts/&outputPath=fonts/'
          }
      ]
  },
  devServer: {
      contentBase: __dirname + '/dist',
      compress: true,
      port: 9000,
      open: true,
      hot: true,
      stats: 'errors-only'
  },
  plugins: [
      new HtmlWebpackPlugin({
          title: 'Product Description',
          minimize: false,
          favicon: false,
          hash: true,
          template: './src/index.pug'
      }),
      new HtmlWebpackPlugin({
          title: 'Distribution and Channels',
          minimize: false,
          favicon: false,
          hash: true,
          filename: 'distrib.html',
          template: './src/distrib.pug'
      }),
      new ExtractTextPlugin({
          filename: '/app.css',
          publicPath: '/',
          disable: !isProd,
          allChunks: true
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.LoaderOptionsPlugin({ options:
          { postcss: [
              autoprefixer({
                  browsers: ['last 5 versions'],
                  supports: true,
                  flexbox: true
              })
          ] }
      })
    ]
};