如何调试Webpack打包的CSS？

Question

我已经不再使用老式的样式表了：

<link rel="stylesheet" href="./../css/main.css">

Webpack 方法：

var css = require('./../css/main.css');

它可以工作，但我不喜欢它将 css 从这个文件中提取到内联标记中，因为这样就很难在开发工具中对其进行调试。例如，我不知道这些属性来自哪个文件和行：

如何将它移动到单独的文件或生成指向源文件的源映射？所以当我检查 Dev Tools 时，它看起来像这样：

我的webpack.config.js:

var autoprefixer = require('autoprefixer');

module.exports = {
    devtool: "css-loader?sourceMap",
    module:  {
        loaders: [
            {test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000'},
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    entry:   [
        './static/js/app.js'
    ],
    output:  {
        filename: './static/js/bundle.js'
    },
    watch:   false,
    postcss: function () {
        return [autoprefixer];
    }
};

我的app.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;
require('bootstrap-loader');

module.exports = (function () {
    alert('IT WORKS!');
});

window.app = module.exports;
var css = require('./../css/main.css');

Answer 1

要将您的样式从包中提取到外部样式表，您需要使用 extract text plugin。

一般的 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: [
     new ExtractTextPlugin('styles.css')
]

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

如何调试Webpack打包的CSS？

How to debug CSS bundled by Webpack?

css

webpack

postcss

webpack-style-loader

css-loader