如何调试Webpack捆绑的CSS？

要将样式从捆绑包中提取到外部样式表，您需要使用提取文本插件。

常规的webpack配置如下所示：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: "source-map",
    entry: 'path/to/entry.js',
    output:  {
        path: 'path/to/bundle'
        filename: 'bundle.js'
    },
    module:  {
        loaders: [
            {
                test:   /\.css$/,
                loader: ExtracTextPlugin.extract('css-loader?sourceMap')
            }
        ]
    },
    plugins: [
         new ExtractTextPlugin('styles.css')
    ]
};

您应注意devtool: "source-map"的部分用于调试部分，对于插件，您将提供加载程序作为提取插件方法的参数：

loaders: [
    {
        test:   /\.css$/,
        loader: ExtracTextPlugin.extract('css-loader?sourceMap')
    }
]

在这里，如果您也需要例如链式装载机，sass-loader也可以：

loaders: [
    {
        test:   /\.scss$/,
        loader: ExtracTextPlugin.extract('css-loader?sourceMap!sass-loader?sourceMap')
    }
]

您不再需要样式加载器，但您也可以将其作为备用加载器提供给插件：

loaders: [
    { 
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: "css-loader?sourceMap"
        })
    }
]

并在您的plugins数组中实例化该插件，并为外部样式表提供所需的名称：

plugins: [
     new ExtractTextPlugin('styles.css')
]

[name]如果您有多个入口点，并且每个入口都有一个样式表，则也可以使用占位符。