为 extract-text-webpack-plugin 配置源映射答案

【问题标题】：Configure source maps for extract-text-webpack-plugin为 extract-text-webpack-plugin 配置源映射
【发布时间】：2017-06-13 00:02:39
【问题描述】：

当 devtools 配置选项设置为包含“source-map”的任何值（不仅是完全匹配）时，我如何配置 extract-text-webpack-plugin 以生成源映射？

【问题讨论】：

标签： webpack source-maps extract-text-plugin

【解决方案1】：

你应该反之亦然。这样的事情肯定会奏效。如果需要，只需配置 SCSS/LESS。

var DEBUG_MODE = process.env.NODE_ENV !== 'production';

module.exports = {
   ...
   devtool: DEBUG_MODE ? 'cheap-source-map' : 'source-map'
   ...
   module: {
          loaders: [
            { 
              test: /\.css$/, 
              loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]

【讨论】：

谢谢！但这并不完全是我想要实现的目标：我希望 ExtractTextPlugin 为 dev 和 prod 生成源映射。对于 dev，我们将“devtool”设置为“cheap-source-map”，而对于 prod，我们将其设置为“source-map”。因此，当我运行开发配置时，CSS 源映射是空的。
@kirschpirogge ：我已经为您的请求更新了解决方案。开发工具：调试模式？ “廉价源地图”：“源地图”
好吧，酷！但是当 'devtool' 设置为 'cheap-source-map' 时，ExtractTextPlugin 不会为 CSS 生成源映射。是否可以通过某种方式配置来生成它们？
@kirschpirogge ：如果你想要一个单独的文件，那么使用源映射。您可以在此处参考更多详细信息：cheng.logdown.com/posts/2016/03/25/679045 另外，如果上述答案对您有所帮助，则只需将其标记为已接受/赞成。
投反对票，因为正如official docs 中所述，ExtractTextPlugin 仅适用于 devtool: "source-map" 设置。