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

Question

编辑:发布此问题后不久找到了解决方案.请参阅下面的我的答案

---

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

另外,我在webpack(vendor和app)中定义了两个入口点,它们构建到我的JS包中.

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

查看源图文件本身,我只看到"sources"下面列出的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", .....

但是,如果我ExtractTextPlugin在webpack配置中注释掉,我会在源代码中列出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

发布此问题后不久就找到了解决方案!只是想回答它,因为其他人遇到同样的问题.

我设法找到这个有用的github问题.问题在于sourceMapFileNamewebpack输出中的set.我的是:

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

巧合的是,它会匹配来自extractTextPlugin的CSS以及app bundle.所以一个人覆盖了另一个人.

将该行更改为:

sourceMapFilename: '[file].map',

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

希望这有助于某人.:)