Webpack 2 ExtractTextPlugin CSS Quellkarten überschreiben Babel 6 JS Quellkarten

Question

EDIT: eine Lösung kurz nach dem Posten dieser Frage gefunden. Siehe unten unter My Answer.

---

Ich habe ein webpack 2 basiertes Projekt, das ExtractTextPlugin zu ziehen SCSS/CSS in eine separate Datei verwendet.

Zusätzlich habe ich zwei Eingangspunkte in Webpack (vendor und app) definiert, die zu meinen JS-Bundles aufbauen.

Aus irgendeinem Grund scheint ExtractTextPlugin die Quellkarte zu brechen, die für das App-Bundle app.js.map generiert wurde. Wenn ich mir die Quellkarte anschaue, zeigt sie auf zufällige Zeilen in der extrahierten CSS-Datei anstelle von JS.

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

jedoch, wenn ich die ExtractTextPlugin im webpack Config auf Kommentar:

in der sourcemap Datei sucht selbst, ich nur unter "Quellen" (shortene Probe unten) aufgeführt CSS und SCSS Dateien sehen , erhalte ich JS-Dateien in Quellen aufgeführt:

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

Also nicht wirklich sicher, was hier vor sich geht ... Es scheint, wie etwas über ExtractTextPlugin bricht oder die sourcemap für die App bund überschreiben le?

Hier ist, wie ich alle relevanten Plugins in meinem webpack Config definiert:

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

Irgendwelche Ideen, was dieses verursachen kann? Könnte es eine Art Konflikt mit UglifyJS und dem ExtractTextPlugin geben? ein Config-Problem meinerseits?

Answer 1

Die Lösung kurz nach dem Stellen dieser Frage gefunden! Ich wollte es nur beantworten, wenn jemand anderes auf dasselbe Problem stößt.

Ich habe es geschafft, this helpful github issue zu finden. Das Problem liegt bei sourceMapFileName in der Webpack-Ausgabe festgelegt. Meins war:

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

, die, zufällig, würde passen sowohl die CSS von extractTextPlugin sowie den App-Bundle. So überschrieb man den anderen.

Ändern Sie diese Zeile an:

sourceMapFilename: '[file].map', 

ermöglicht eine einzigartige CSS Karte und JS Karte generiert werden!

Ich hoffe, das hilft jemandem. :)