webpack 4.10.2でscssを使用する方法

以下に設定ファイルを記載します。
scssを実行するだけなら不必要なものも含まれていると思いますが、そこはご勘弁ください
あとで修正しまっす
一応、以下が実現できるので、そんなに無駄な情報は詰まってないはず・・・

react/flux
scss
react-router
ファイル変更時のブラウザ自動リロード
es6

`package.json`

{
  "name": "hogemaru",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --history-api-fallback --host 0.0.0.0",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router-dom": "^4.2.2",
    "history": "^4.7.2",
    "react-tap-event-plugin": "^3.0.2",
    "flux": "^3.1.3"
  },
  "devDependencies": {
    "autoprefixer": "^8.5.2",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "prop-types": "^15.6.1",
    "sass-loader": "^7.0.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.10.2",
    "webpack-cli": "^2.1.5",
    "webpack-dev-server": "^3.1.4"
  }
}

webpack.config.babel.js


const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
  {
    mode: 'development',
    entry: `${__dirname}/app/index`,
    output: {
      filename: 'bundle.js',
      path: `${__dirname}/public/js/`,
      publicPath: '/js/',
    },
    module: {
      rules: [
        {
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                babelrc: true,
                presets: ['es2015', 'react', 'stage-2'],
              },
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx'],
    },
    plugins: [
      new CaseSensitivePathsPlugin(),
    ],
    devServer: {
      contentBase: `${__dirname}/public/`,
      open: true,
    },
  },
  {
    mode: 'development',
    entry: { style: `${__dirname}/app/stylesheets/style.scss` },
    output: {
      filename: 'style.css',
      path: `${__dirname}/public/css/`,
      publicPath: '/css/',
    },
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'postcss-loader', 'sass-loader'],
          }),
        },
      ],
    },
    plugins: [
      new ExtractTextPlugin('style.css'),
      new CaseSensitivePathsPlugin(),
    ],
  },
];

postcss.config.js


const Autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [Autoprefixer],
};

ディレクトリ構成

----
 |__app(jsファイルとかを詰めるフォルダ)
 |
 |__jsonconfig.json（コンパイル設定を記述）
 |
 |__ package.json
 |
 |__ postcss.config.js
 |
 |__ public（コンパイル後のjsファイルやhtmlを置く場所）
 |
 |__webpack.config.js

react-router4とかの動作ファイルはまた後日

webpack4でscss

webpack 4.10.2でscssを使用する方法

package.json

webpack.config.babel.js

postcss.config.js

ディレクトリ構成

`package.json`