Webpack 2 ExtractTextPlugin CSS 源映射覆盖 babel 6 JS 源映射

Question

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

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

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

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

查看 sourcemap 文件本身，我只看到 CSS 和 SCSS 文件列在 "sources" 下（下面的缩短示例）：

{"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，我会在 sources:

中列出 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地图！

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

Webpack 2 ExtractTextPlugin CSS 源映射覆盖 babel 6 JS 源映射

Webpack 2 ExtractTextPlugin CSS sourcemaps overwriting babel 6 JS sourcemaps

uglifyjs

source-maps

webpack

webpack-2

extract-text-plugin