Webpack 3 + ExtractTextPlugin下SCSS Sourcemaps无法正常工作

我看到你在配置Webpack启用SCSS 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'); 

let config = { 
  entry: './src/index.ts', 
  devtool: 'eval-source-map', // for choosing a style of source map out...
  // 其他配置项
};

1. 确认devtool选项的适配性 #

你当前使用的devtool: 'eval-source-map'在开发环境是可行的，但它是把Sourcemap嵌入到代码中的形式，和ExtractTextPlugin配合时可能会出现Sourcemap不生效的问题。如果是开发环境，可以尝试换成'cheap-module-eval-source-map'，它的构建速度更快且Sourcemap质量不错；如果是生产环境想要生成独立的Sourcemap文件，建议换成'source-map'或者'nosources-source-map'（后者不会暴露原始代码，更适合生产环境）。

2. 确保SCSS处理链全环节开启Sourcemap #

Sourcemap是链式传递的，所以从sass-loader到css-loader再到ExtractTextPlugin，每一步都需要开启Sourcemap支持。在你的module rules里配置SCSS处理时，要明确加上sourceMap选项：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: { 
              sourceMap: true,
              importLoaders: 1 // 确保@import的SCSS文件也能被sass-loader处理
            }
          },
          {
            loader: 'sass-loader',
            options: { 
              sourceMap: true 
            }
          }
        ]
      })
    },
    // 你的TS处理规则等其他配置
  ]
}

3. 调整ExtractTextPlugin的配置 #

使用ExtractTextPlugin时，需要确保它没有禁用Sourcemap，并且正确关联输出的CSS文件。在插件实例化时加上相关配置：

plugins: [
  new ExtractTextPlugin({
    filename: '[name].css', // 输出的CSS文件名
    disable: false, // 不要禁用插件，确保CSS被提取
    allChunks: true // 提取所有chunk的CSS
  }),
  // 其他插件
]

同时，在Webpack的output配置里，最好明确指定Sourcemap的输出文件名：

output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist'),
  sourceMapFilename: '[name].map' // 指定Sourcemap文件的命名规则
}

4. 修复压缩插件对Sourcemap的破坏 #

你用到了UglifyJSPlugin和OptimizeCSSAssets这两个压缩插件，它们默认可能会忽略Sourcemap，需要手动开启Sourcemap支持：

plugins: [
  // ...其他插件
  new UglifyJSPlugin({
    sourceMap: true // 开启JS的Sourcemap支持
  }),
  new OptimizeCSSAssets({
    cssProcessorOptions: {
      map: {
        inline: false, // 生成独立的CSS Sourcemap文件，而不是嵌入到CSS中
        annotation: true // 在CSS文件末尾添加Sourcemap的引用注释
      }
    }
  })
]

按照上面的步骤逐一检查并调整你的配置，应该就能解决Sourcemaps不生成或者无效的问题。如果还有具体的报错信息或者现象（比如浏览器开发者工具里看不到SCSS源文件），可以补充出来，我再帮你进一步定位。

内容的提问来源于stack exchange，提问作者johnnycopes