无法导入bootstrap-webpack依赖项

Question

我正在使用webpack并在我的应用程序中做出反应。我想导入bootstrap依赖项。我在package.json上添加了“bootstrap-webpack”：“0.0.5”。下面是webpack.config.js。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

const TARGET = process.env.npm_lifecycle_event;
const merge = require('webpack-merge');

const PATHS = {
  //react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};
const pkg = require('./package.json');
process.env.BABEL_ENV = TARGET;

var bootstrapPath = path.join(
    __dirname,
    'node_modules/bootstrap/dist/css'
);

const common = {
    entry: {
        app: PATHS.app
      },
    output: {
        path: PATHS.build,
        filename: "bundle.js",
        sourceMapFilename: "bundle.map"
    },
    resolve: {
      extensions: ['', '.js', '.jsx'],
      modulesDirectories: ['node_modules', bootstrapPath]
    },
    debug: true,
    module: {
        preLoaders: [
          {
            test: /\.js$/,
            loader: "source-map-loader"
          }
        ],
        loaders: [
            {   test: /\.css$/, 
                loaders: ['style', 'css'],
                include: [PATHS.app, bootstrapPath]
            },
            {
                test: /\.js$/, 
                exclude: /node_modules/,
                loaders: ['babel-loader?presets=es2015']
            },
            {
              test: /\.jsx?$/,
              loaders: ['babel?cacheDirectory'],
              include: PATHS.app
            },
            {
              test: /\.less$/,
              loader: "style!css!less"
            },
            { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
            { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&mimetype=application/font-woff" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&mimetype=image/svg+xml" }
        ]
    },
    devtool: 'eval-source-map',

    plugins: [
        new NpmInstallPlugin({
        save: true // --save
      })
    ]
};

if(TARGET === 'start' || !TARGET) {
  module.exports = merge(common, { });
}

if(TARGET === 'build' || TARGET === 'stats'){
    module.exports = merge(common, {});
}

在我的条目javascript中，我添加了

import 'bootstrap-webpack';

但是在启动webpack-dev-server之后，我得到了以下错误：

[

216] ./~/bootstrap-webpack/index.js 122 bytes {0} [built] [1 error]
  [217] ./~/style-loader!./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 1.15 kB {0} [built] [1 error]
     + 215 hidden modules

ERROR in ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module build failed: Error: Cannot find module '/Users/yzzhao/dev/react-demo/webpack_demo/node_modules/source-map-loader/index.js!/Users/yzzhao/dev/react-demo/webpack_demo/node_modules/bootstrap-webpack/bootstrap.config.js'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.module.exports.pitch (/Users/yzzhao/dev/react-demo/webpack_demo/node_modules/bootstrap-webpack/bootstrap-scripts.loader.js:20:16)
 @ ./~/bootstrap-webpack/index.js 2:0-52

ERROR in Cannot find module 'less'
 @ ./~/style-loader!./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js 4:14-160
webpack: bundle is now VALID.

当我运行npm install时，我得到了以下警告，不确定它是否与此问题有关：

npm WARN EPEERINVALID bootstrap-webpack@0.0.5 requires a peer of exports-loader@>=0.6.2 but none was installed.
npm WARN EPEERINVALID bootstrap-webpack@0.0.5 requires a peer of file-loader@>=0.8.1 but none was installed.
npm WARN EPEERINVALID bootstrap-webpack@0.0.5 requires a peer of imports-loader@>=0.6.3 but none was installed.
npm WARN EPEERINVALID bootstrap-webpack@0.0.5 requires a peer of url-loader@>=0.5.5 but none was installed.
npm WARN EPEERINVALID less-loader@2.2.3 requires a peer of less@^2.3.1 but none was installed.
npm WARN EPACKAGEJSON webpack_demo@1.0.0 No description
npm WARN EPACKAGEJSON webpack_demo@1.0.0 No repository field.

以下是我的package.json文件：

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "deploy": "gh-pages -d build",
    "stats": "webpack --profile --json > stats.json",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.0",
    "babel-preset-survivejs-kanban": "^0.3.3",
    "babel-register": "^6.4.3",
    "clean-webpack-plugin": "^0.1.8",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "gh-pages": "^0.11.0",
    "html-webpack-plugin": "^2.15.0",
    "jquery": "^1.12.0",
    "less-loader": "^2.2.3",
    "npm-install-webpack-plugin": "^3.0.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.8.4"
  },
  "dependencies": {
    "babel-loader": "^6.2.4",
    "baidu": "0.0.1",
    "bootstrap": "^3.3.6",
    "bootstrap-webpack": "0.0.5",
    "install": "^0.6.1",
    "less-loader": "^2.2.3",
    "little-loader": "^0.1.1",
    "main": "^1.0.1",
    "npm": "^3.8.6",
    "react": "^0.14.8",
    "react-baidu-map": "^1.3.5",
    "react-dom": "^0.14.8",
    "react-google-maps": "^4.9.1",
    "source-map-loader": "^0.1.5",
    "start": "^4.0.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.14"
  }
}