Webpack 3 ExtractTextPlugin生成sourceMap无法正常工作

Question

我有一个使用webpack + extract-text-webpack-plugin的小型演示项目，我启用了devtool：＆＃39; source-map＆＃39;和每个加载器中的sourceMap但我无法看到任何生成的soruceMap文件，也许还有我缺少的东西，但我看不清楚是什么。我的配置中是否缺少anthing？

您可以给予我任何帮助，我们将不胜感激！

这是我的package.json

{
  "name": "demopack",
  "version": "0.1.0",
  "description": "A webpack demo project bundling javascripts and stylesheets",
  "scripts": {},
  "repository": {
    "type": "git",
    "url": "https://bitbucket.org/pmviva/demopack.git"
  },
  "keywords": [
    "demo",
    "project",
    "webpack"
  ],
  "author": "Pablo Martin Viva",
  "license": "MIT",
  "homepage": "https://bitbucket.org/pmviva/demopack/",
  "dependencies": {
    "font-awesome": "^4.7.0",
    "foundation-sites": "^6.4.3",
    "motion-ui": "^1.2.3"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.8",
    "sass-loader": "^6.0.6",
    "ts-loader": "^3.1.1",
    "typescript": "^2.6.1",
    "webpack": "^3.8.1"
  }
}

这是我的webpack配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const autoprefixer = require('autoprefixer');
const path = require('path');

const extractor = new ExtractTextPlugin({
    allChunks: true,
    filename: 'styles/app.bundle.css'
});

const OPTIONS_BABEL = {
    presets: [
        [
            'env', {
                targets: {
                    browsers: ['last 2 versions', 'ie >= 9']
                }
            }
        ]
    ]
};

const OPTIONS_CSS = {
    sourceMap: true
};

const OPTIONS_FILE = {
    name: 'fonts/[name].[ext]'
};

const OPTIONS_POSTCSS = {
    plugins: [
        autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        })
    ],
    sourceMap: true
};

const OPTIONS_SASS = {
    includePaths: [
        path.resolve(__dirname, 'node_modules')
    ],
    sourceMap: true
};

const OPTIONS_TYPESCRIPT = {
};

module.exports = {
    devtool: 'source-map',
    entry: './src/scripts/app.ts',
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    {
                        loader: 'babel-loader', options: OPTIONS_BABEL
                    }
                ]
            },
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'babel-loader', options: OPTIONS_BABEL
                    },
                    {
                        loader: 'ts-loader', options: OPTIONS_TYPESCRIPT
                    }
                ]
            },
            {
                test: /\.scss?$/,
                use: extractor.extract({
                    use: [
                        {
                            loader: 'css-loader', options: OPTIONS_CSS
                        },
                        {
                            loader: 'postcss-loader', options: OPTIONS_POSTCSS
                        },
                        {
                            loader: 'sass-loader', options: OPTIONS_SASS
                        }
                    ]
                })
            },
            {
                test: /\.(eot|otf|ttf|svg|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader', options: OPTIONS_FILE
                    }
                ]
            }
        ]
    },
    output: {
        filename: 'scripts/app.bundle.js',
        path: path.resolve(__dirname, 'static')
    },
    plugins: [
        extractor
    ]
};

这是我的app.scss

/**
 * Entry file: app.scss
 */

 @import 'font-awesome-settings';
 @import 'foundation-settings';
 @import '~font-awesome/scss/font-awesome';
 @import '~foundation-sites/scss/foundation';
 @import '~motion-ui/src/motion-ui';

 @include foundation-everything;