webpack - 带有 sourcemap 和 devtool 的 Webpack sass-loader

Question

嘿，我是 Webpack 的新手。

我通过源映射的 cmd 参数搜索在开发和生产模式之间切换的解决方案。

Webpack 自带

webpack --devtool eval

但是这个命令被 sass-loader 忽略（https://github.com/jtangelder/sass-loader）

根据 sass-loader 页面上的描述，在配置文件中编写 sourcemaps 修复的选项是非常必要的：

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

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

Answer 1

我能够使用需要 node-sass 和 webpack 作为 peerdependencies 的sass-loader ，并通过使用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以获取工作示例。希望这可以帮助！