Webpack 2 ExtractTextPlugin CSS sourcemaps 覆盖 babel 6 JS sourcemaps

Question

编辑：在发布此问题后不久就找到了解决方案。请参阅下面的My Answer。

---

我有一个基于 webpack 2 的项目，它使用 ExtractTextPlugin 将 SCSS/CSS 提取到单独的文件中。

此外，我在 webpack 中定义了两个入口点（vendor 和 app），它们构建到我的 JS 包中。

由于某种原因，ExtractTextPlugin 似乎破坏了为应用程序包生成的源映射app.js.map。如果我查看 sourcemap，它会指向提取的 CSS 文件中的随机行，而不是 JS。

查看源映射文件本身，我只看到“源”下列出的 CSS 和 SCSS 文件（下面的缩短示例）：

{"version":3,"sources":["webpack:///webpack:///~/icon-font/package/styles/ficon.css","webpack:///webpack:///~/styles/package/styles/_imports.scss","webpack:///webpack:///~/styles/package/styles/includes/_variables.scss","webpack:///webpack:///~/styles/package/styles/includes/_mixins-utilities.scss", .....

然而，如果我在 webpack 配置中注释掉 ExtractTextPlugin，我会在源代码中列出 JS 文件：

{"version":3,"sources":["webpack:///app-552b3935c142f5001484.js","webpack:///./src/lib/Globals.js","webpack:///./src/actions/AdActions.js", ....

所以不太确定这里发生了什么......似乎关于ExtractTextPlugin 的某些东西正在破坏或覆盖应用程序包的源映射？

这是我在 webpack 配置中定义所有相关插件的方式：

{
  entry: {
    vendors: [
      'react',
      'react-dom',
      'react-redux',
    ],
    app: path.resolve(__dirname, './../src/client.js'),
  },
  output: {
    path: path.resolve(__dirname, './../dist/assets/'),
    filename: '[name]-[chunkhash].js',
    sourceMapFilename: '[name]-[chunkhash].js.map',
  },
  cache: false,
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(scss|sass|css)$/,
        loader: ExtractTextPlugin.extract({
          loader: [
            'css?sourceMap',
            'postcss-loader',
            'sass?sourceMap'
          ],
        }),
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.join(__dirname, '../src')],
        exclude: [NODE_MODULES_DIR],
      },
    ],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: false,
      postcss: () => ([autoprefixer]),
      eslint: {
        emitWarning: true,
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      minChunks: Infinity,
    }),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
        drop_console: true,
        collapse_vars: true,
        reduce_vars: true,
      },
      output: {
        comments: false,
        ascii_only: true,
      },
    }),
    new ExtractTextPlugin({ filename: '_all.[chunkhash].css', allChunks: true }),
  ],
}

任何想法可能导致这种情况？会不会是与 UglifyJS 和 ExtractTextPlugin 的某种冲突？我的配置问题？

Answer 1

发布此问题后不久就找到了解决方案！只是想回答它，以防其他人遇到同样的问题。

我设法找到了this helpful github issue。问题在于 webpack 输出中的 sourceMapFileName 设置。我的是：

sourceMapFilename: '[name]-[chunkhash].js.map',

巧合的是，这将匹配 extractTextPlugin 中的 CSS 以及应用程序包。所以一个正在覆盖另一个。

将该行更改为：

sourceMapFilename: '[file].map',

允许生成唯一的 CSS 映射和 JS 映射！

希望这对某人有所帮助。 :)