No sourcemap for js with ExtractTextPlugin

Question

With this config I get an app.bundle.js, app.map, app.css. The problem is that app.map contains only the css related code. If I don't use ExtractTextPlugin then the sourcemap contains all the css and js related code but I have to keep css in a separate file. If I don't get map for css that's fine but for js it is a must have.

// webpack.common.config
var webpack = require('webpack');
var helpers = require('./helpers');

var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackPostcssTools = require('webpack-postcss-tools');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
var map = webpackPostcssTools.makeVarMap('src/css/index.css');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');

const METADATA = {
    baseUrl: '/'
};

module.exports = {
metadata: METADATA,
entry: {
    'app': './src/js/app.js',
    'vendor': './src/vendor.js'

},
resolve: {
    extensions: ['', '.js'],
    root: helpers.root('src'),
    modulesDirectories: ['node_modules']
},
module: {
    preLoaders: [
        { test: /\.js$/, loaders:['eslint', 'source-map-loader'], exclude: /node_modules/ }
    ],
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.json$/,
            loader: 'json-loader'
        },

        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap&importLoaders=1!postcss-loader?sourceMap')
        },
        {
            test: /\.html$/,
            loader: 'raw-loader',
            exclude: [helpers.root('src/index.html')]
        },
        {
            test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader?limit=10000&minetype=application/font-woff"
        }, {
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "file-loader"
        }
    ]

},
plugins: [
    new ngAnnotatePlugin({
        add: true,
    }),
    new ExtractTextPlugin("[name].css", { allChunks: true }),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({
        name: helpers.reverse(['vendor', 'app']),
        minChunks: Infinity
    }),
    new CopyWebpackPlugin([{
            from: 'src/res',
            to: 'res'
        }, {
            from: 'src/templates',
            to: 'templates'
        }
    }
    ]),
    new HtmlWebpackPlugin({
        template: 'src/index.html',
        chunksSortMode: 'none'

    }),

],

postcss: function (webpack) {
    return [
        //webpackPostcssTools.prependTildesToImports,
        postcssImport({ addDependencyTo: webpack }),

        require('postcss-custom-properties')({
            variables: map.vars
        }),

        require('postcss-custom-media')({
            extensions: map.media
        }),

        require('postcss-calc'),
        autoprefixer
    ];
},
node: {
    global: 'window',
    crypto: 'empty',
    module: false,
    clearImmediate: false,
    setImmediate: false
},
};

// webpack.dev.config
var helpers = require('./helpers');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.common.js');
var DefinePlugin = require('webpack/lib/DefinePlugin');


const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
const METADATA = webpackMerge(commonConfig.metadata, {
    host: 'localhost',
    port: 8000,
    ENV: ENV
});


module.exports = webpackMerge(commonConfig, {

debug: true,
metadata: METADATA,
devtool: 'source-map',

output: {

    path: helpers.root('www'),
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'

},

plugins: [
    new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV)
    }),
],
devServer: {
    port: METADATA.port,
    host: METADATA.host,
    historyApiFallback: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    }
},
eslint: {
    configFile: './.eslintrc.js',
    emitError: false,
    emitWarning: false,
    fix: true
},

node: {
    global: 'window',
    crypto: 'empty',
    process: true,
    module: false,
    clearImmediate: false,
    setImmediate: false
}
});

Answer 1

The issue seems to be that ExtractTextPlugin overwrites other sourcemaps, according to this discussion: https://github.com/webpack/extract-text-webpack-plugin/issues/119

You can fix this issue by ensuring that each output file that gets a sourcemap gets a different filename, like this:

sourceMapFilename: '[file].map'