ExtractTextPluginを持つjsのソースマップがありません

Question

この設定では、app.bundle.js、app.map、app.cssを取得します。問題は、app.mapにはcss関連のコードのみが含まれていることです。 ExtractTextPluginを使用しない場合、sourcemapにはすべてのcssとjs関連のコードが含まれていますが、別のファイルにcssを保存しなければなりません。私はcssのための地図が得られないなら、それは良いですが、jsのためにそれは必要があります。

// 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

問題がExtractTextPluginがこの議論によると、他のsourcemapsを上書きすることのようだ：https://github.com/webpack/extract-text-webpack-plugin/issues/119

あなたが取得すること、各出力ファイルを確保することによってこの問題を解決することができますsourcemapは次のように異なるファイル名を取得します。

sourceMapFilename: '[file].map'