Question

嘿，我是Webpack的新手。

我通过源映射的cmd参数搜索解决方案，以便在dev和prod模式之间切换。

Webpack原生于

webpack --devtool eval

但是sass-loader（https://github.com/jtangelder/sass-loader）

会忽略此命令

根据sass-loader页面上的描述，它的nessercery在配置文件中编写源映射修复的选项：

module.exports = {
    ...
    devtool: "source-map",
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css?sourceMap", "sass?sourceMap"]
            }
        ]
    }
};

是否有任何解决方案可通过命令行进行配置？

Answer 1

我能够使用sass-loader，它需要node-sass和webpack作为peerdependencies，并使用extract-text-webpack-plugin

解决此问题

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

module.exports = {
    ...
    devtool: "source-map",
    module: {
        loaders: [
            {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css')},
            {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')}
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css')
    ],
};

查看test/sourceMap的工作示例。希望这有帮助！

Webpack sass-loader与sourcemap和devtool

1 个答案: