Question

使用此配置，我得到app.bundle.js，app.map，app.css。问题是app.map只包含与css相关的代码。如果我不使用ExtractTextPlugin，那么源映射包含所有css和js相关代码，但我必须将css保存在单独的文件中。如果我没有得到css的地图那么好，但对于js来说这是必须的。

        <field name="arch" type="xml">
           <field name="ssnid" position="replace" />
           <field name="sinid" position="replace" />
        </field>

// 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
},
};

Answer 1

根据此讨论，问题似乎是ExtractTextPlugin会覆盖其他源图：https://github.com/webpack/extract-text-webpack-plugin/issues/119

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

sourceMapFilename: '[file].map'

没有带ExtractTextPlugin的js的源图

1 个答案: