Javascript SCSS源地图不适用于Webpack 3+；ExtractTextPlugin

我正试图在我的应用程序中为我的SCS启用sourcemaps，但我手头有一个非常令人费解的情况。这是我的配置文件：

const webpack=require（'webpack'）；
const path=require（'path'）；
const ExtractTextPlugin=require（'extract-text-webpack-plugin'）；
const UglifyJSPlugin=require（'uglifyjs-webpack-plugin'）；
const OptimizeCSSAssets=require（'optimize-css-assets-webpack-plugin'）；
让配置={
条目：'./src/index.ts'，
devtool:'eval source map'，//用于选择源映射的样式
输出：{
文件名：“bundle.js”，
path:path.resolve（uu dirname，'./dist'）
},
开发服务器：{
contentBase:path.resolve（_dirname，'./dist'），//从中提供HTML内容的目录或URL
historyApiFallback:true，//回退到SPA的/index.html
是的，
打开：false//启动时打开默认浏览器
},
模块：{
规则：[
{
测试：/\.ts$/，//以.ts结尾的文件
排除：/node\u modules/，//排除节点模块目录
使用：“ts加载器”
},
{
测试：/\.js$/,，
排除：/node_模块/，
使用：{
加载器：“巴别塔加载器”，
选项：{
预设：[“环境”]
}
}
},
{
测试：/\.scss$/，//以.scss结尾的文件
用法：['css-hot-loader'].concat(
ExtractTextPlugin.extract({
回退：“样式加载器”，
使用：[
//{loader:'style loader'，选项：{sourceMap:true}，
{loader:'css loader'，选项：{sourceMap:true}}，
{loader:'postsss loader'，选项：{sourceMap:true}，
{loader:'sass loader'，选项：{sourceMap:true}，
],
})
)
},
{
测试：//\（png | svg | jpg | gif）$/，//用于其他文件类型
使用：['file-loader？name=[name].[ext]&outputPath=img/']
}
]
},
决心：{
扩展名：['.ts'，'.js']
},
插件：[
新的webpack.ProvidePlugin({
$：“jquery”，
jQuery:'jQuery'
}),
新建ExtractTextPlugin（'styles.css'）//调用ExtractTextPlugin并命名我们的css文件
]
};
module.exports=config；
if（process.env.NODE_env===‘生产’）{
module.exports.plugins.push(
新建webpack.optimize.UglifyJsPlugin（），//调用uglify插件
新建优化器cssassets（）//调用CSS优化器（用于缩小）
);
}