Twitter bootstrap 带有bootstrap.css的网页包不起作用

这是我的webpack.config.js文件：

这是我的package.json文件：

这是我的app.js文件：

在尝试启动网页包后，我遇到了一个错误

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css Module parse failed:
/var/www/dcracks/app/webpack/node_modules/bootstrap/dist/css/bootstrap.css
Unexpected token (7:5) You may need an appropriate loader to handle this file type.
  |  */
  | /*! normalize.css v3.0.3
  | MIT License
  | github.com/necolas/normalize.css */
  | html {
  |   font-family: sans-serif;
  |   -webkit-text-size-adjust: 100%;
  @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-42
  @ ./src/app.js  @ multi ./src/app.js

我已经重读了一堆材料，并在各种论坛上发表了一堆帖子。 我做错了什么？

问题是：

由于没有第二个参数，因此未使用

css加载程序。最常见的配置是使用
css加载器
处理css文件和
样式加载器
作为回退，在不应提取时使用（仍应用配置的加载器，但使用回退加载器代替提取）

您可以使用中显示的规则

多谢各位
"dependencies": {
    "angular": "^1.6.4",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "jquery": "^3.2.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1"
}

import 'babel-polyfill';
import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.js';
import 'bootstrap/dist/css/bootstrap.css';

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css Module parse failed:
/var/www/dcracks/app/webpack/node_modules/bootstrap/dist/css/bootstrap.css
Unexpected token (7:5) You may need an appropriate loader to handle this file type.
  |  */
  | /*! normalize.css v3.0.3
  | MIT License
  | github.com/necolas/normalize.css */
  | html {
  |   font-family: sans-serif;
  |   -webkit-text-size-adjust: 100%;
  @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-42
  @ ./src/app.js  @ multi ./src/app.js

ExtractTextPlugin.extract(options: loader | object)

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: 'css-loader'
  })
}