javascript - 没有带有 ExtractTextPlugin 的 js 源映射

Question

通过此配置，我得到了 app.bundle.js、app.map、app.css。问题是 app.map 只包含 css 相关代码。如果我不使用 ExtractTextPlugin，那么 sourcemap 包含所有与 css 和 js 相关的代码，但我必须将 css 保存在一个单独的文件中。如果我没有为 css 获取 map 那很好，但对于 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 覆盖了其他源映射:https://github.com/webpack/extract-text-webpack-plugin/issues/119

您可以通过确保获取源映射的每个输出文件获得不同的文件名来解决此问题，如下所示:

sourceMapFilename: '[file].map'