使用Webpack编译Sass（和本地作用域类名称）

我花了数小时试图获取我的Webpack配置来编译Sass。这有点荒谬。在我的研究过程中，我发现了数十个Github问题，Stackoverflow帖子和博客，讨论如何在Webpack中使用Sass，并且它们的使用方式有所不同。另外，有很多人有问题。我只是认为Webpack需要更好地记录。啊。

我想出了如何编译Sass并让Webpack从中将其提供到内存中/static，但是我希望类名在本地范围内。这不是带有React组件的模块化CSS的好处之一吗？

本地范围的示例：.foo__container___uZbLx {...}

因此，这是我的Webpack配置文件：

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

module.exports = {
    devtool: 'source-map',
    entry: {
        bundle: './src/js/app'
    },
    output: {
        path: __dirname,
        filename: '[name].js',
        publicPath: '/static'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new ExtractTextPlugin('[name].css', {allChunks: true})
    ],
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude:  /node_modules/,
                include: path.join(__dirname, 'src'),
                loader: 'babel'
            },
            {
                test: /\.scss$/,
                exclude:  /node_modules/,
                include: path.join(__dirname, 'src'),
                loader:  ExtractTextPlugin.extract('style', 'css?sourceMap!sass')
            }
        ]
    }
};

我设法使其适用于原始CSS：

{
    test: /\.css$/,
    exclude:  /node_modules/,
    include: path.join(__dirname, 'src'),
    loader:  ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
}

我不太了解带有所有?标记的类似参数的语法，也不知道要查找与之相关的文档的搜索内容。

这就是我的React组件的样子；以防万一您想看看我如何导入样式：

import React, { Component } from 'react';
import s from './foo.css';

class Foo extends Component {
    render() {
        return (
            <div className={s.container}>
                <h1 className="title">Welcome!</h1>
                <p className="body">This is a dummy component for demonstration purposes.</p>
            </div>
        );
    }
}

export default Foo;

另外，我有三个不相关的问题：

• output.path如果Webpack仅通过方式从内存中提供文件，属性的意义是/static什么？
• 什么是点webpack-dev-server，如果我在做什么这里是否足够？据我了解，webpack-dev-server仅是热模块更换之类的东西，对吗？只是自动刷新？
• 我exclude和include财产是否多余？据我了解，排除会node_modules减少编译时间，从而使其工作更快；更少的文件要处理。