Webpack 2 ExtractTextPlugin CSSソースマップ上書きバーベル6 JSソースマップ

Question

EDIT：この質問を投稿した直後に解決策が見つかりました。以下のMy Answerを参照してください。

---

私は別のファイルにSCSS/CSSを引き出すためにExtractTextPluginを使用していますWebPACKの2ベースのプロジェクトを持っています。

さらに、webpack（vendorとapp）には2つのエントリポイントが定義されています。これはJSバンドルに組み込まれています。

何らかの理由で、ExtractTextPluginが、アプリケーションバンドルのために生成されたソースマップを破損していると思われます。app.js.map sourcemapを見ると、JSの代わりに、抽出されたCSSファイル内のランダムな行を指しています。

sourcemapファイル自体の内部を見ると、私は唯一の「ソース」（以下shorteneサンプル）の下にリストされているCSSやSCSSファイルを参照してください。私はWebPACKの設定でExtractTextPluginをコメントアウトした場合、しかし

{"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", ..... 

は、 、私はソースに記載されたJSファイルを取得：

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

...それはおよそExtractTextPlugin破損したり、アプリ外灘のためsourcemapを上書きしているもののように思えるものをここで起こっているので、本当にわかりませんル？これを引き起こす可能性のあるものを

{ 
    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 }), 
    ], 
} 

任意のアイデア：ここ

は私が私のWebPACKの設定で定義されたすべての関連のプラグインを持っているかですか？それはUglifyJSとExtractTextPluginと何らかの矛盾がありますか？私の部分に設定の問題？

Answer 1

この質問を投稿した直後に解決策が見つかりました！他の誰かがこの同じ問題に遭遇したときにそれに答えたいと思っていました。

this helpful github issueが見つかりました。問題はwebpackの出力に設定されたsourceMapFileNameにあります。鉱山は：

偶然、extractTextPluginからCSSだけでなく、アプリケーションバンドルの両方にマッチする、

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

。だから1つは他を上書きしていた。

にその行を変更する：

sourceMapFilename: '[file].map', 

は独自のCSSマップとJSマップを生成することができます！

これは誰かを助けることを望みます。 :)