Question

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

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

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

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

查看源图文件本身，我只看到＆＃34;来源＆＃34;下列出的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以及app bundle。所以有人覆盖了另一个。

将该行更改为：

sourceMapFilename: '[file].map',

允许生成一个独特的CSS地图和JS地图！

希望这有助于某人。 :)

Webpack 2 ExtractTextPlugin CSS源图覆盖babel 6 JS源图

1 个答案: