Webpack提取文本插件没有生成单独的CSS文件？

Question

我有一个 src / styles / main.scss 文件，我想将其转换为 build / styles / main.css ，然后在索引中使用它html的

我一直在尝试使用text extractor plugin设置webpack，但无法获得最终结果。

这是我的目录结构：

project
 // build needs to be generated, as of now only js folder with index.js is generated
 - build
 - src
   - styles
     - main.scss
     - components
       - header.scss
   - js
     - stores
     // some other files
 - webpack.config.js

webpack.config.js

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

const BUILD_DIR = path.resolve(__dirname, 'build/js');
const APP_DIR = path.resolve(__dirname, 'src');

const config = {
  devtool: 'eval-source-map',
  entry: {
    "index": APP_DIR + '/js/index.jsx'
  },
  output: {
    path: BUILD_DIR,
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: APP_DIR,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract(
          'style-loader', // backup loader when not building .css file
          'css-loader!sass-loader'
        )
      },
      {
        test: /\.(jsx|js)?/,
        exclude: /node_modules/,
        include: APP_DIR,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  plugins: [
    new ExtractTextPlugin("build/styles/main.css")
  ]
};

module.exports = config;