编译sass-loader后错误的图像url。 webpack 2

Question

我已经在webpack2上编写了我的第一个构建系统。有人可以帮助我解决我的问题。我的配置怎么了？对于我的英语不好，我感到非常抱歉。这里有一些screensshots和我的webpack配置：

`'use strict';

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

const NODE_ENV = process.env.NODE_ENV || 'development'
const isDevelopment = NODE_ENV == 'development' ? true : false;

module.exports = {
    context: __dirname + "/source",

    entry: {
        main: "./static/js/main.js"
    },

    output: {
        path: __dirname + "/dist",
        filename: "/static/js/[name].js"
    },

    watch: true,

    watchOptions: {
        aggregateTimeout: 100
    },

    devtool: isDevelopment ? 'source-map' : null,

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["es2015"] }
                }],
            },
            {
                test: /\.(png|jpg|svg|eot|woff|woff2|ttf)$/,
                exclude: /node_modules/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: '[path][name].[ext]'
                    }
                }],
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: '[name].[ext]'
                    }
                }],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    loader: "css-loader!postcss-loader!sass-loader"
                }),
            }
        ]
    },

    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            filename: "./static/js/common.js",
            minChunks: 2,
        }),
        new ExtractTextPlugin({
            filename: './static/css/styles.css', 
            disable: false, 
            allChunks: true 
        }),
        new SpritesmithPlugin({
            src: {
                cwd: __dirname + '/source/static/img/icons',
                glob: '*.png'
            },
            target: {
                image: __dirname + '/dist/static/img/sprite/sprite.png',
                css: __dirname + '/source/static/scss/_sprite.scss'
            },
            apiOptions: {
                cssImageRef: "/dist/static/img/sprite/sprite.png"
            }
        }),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            server: { baseDir: ['dist'] }
        })
    ],
};`

控制台错误屏幕截图 - http://take.ms/wlMzR