Невозможно получить доступ к правильному пути node_modules на webpack-rails

Я пытаюсь в первый раз работать с угловыми с рельсами в качестве задней части. Я использую webpack-rails gem для настройки webpack для управления css и другими таблицами стилей.

Сначала я сделал приложение с угловыми + рельсами для отображения простого текста "Hello world". По умолчанию шрифт был во времена нового римского. Затем я добавил bootstrap в файл package.json следующим образом.

package.json

{
  "name": "shine",
  "version": "0.0.1",
  "license": "MIT",
  "dependencies": {
    "stats-webpack-plugin": "^0.4.3",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2",
    "css-loader": "^0.23.1",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "bootstrap": "3.3.7"
  }
}

Тогда я побежал npm install, которая была создана папке с именем node_modules со всеми пакетами, упомянутых в package.json в Project/node_modules пути.

Конфигурация webpack для доступа к этим файлам пакетов указана в

webpack.config.js

'use strict';

var path = require('path');
var webpack = require('webpack');
var StatsPlugin = require('stats-webpack-plugin');

// must match config.webpack.dev_server.port
var devServerPort = 3808;

// set NODE_ENV=production on the environment to add asset fingerprints
var production = process.env.NODE_ENV === 'production';

var config = {
  entry: {
    // Sources are expected to live in $app_root/webpack
    'application': './webpack/application.js'
  },

  output: {
    // Build assets directly in to public/webpack/, let webpack know
    // that all webpacked assets start with webpack/

    // must match config.webpack.output_dir
    path: path.join(__dirname, '..', 'public', 'webpack'),
    publicPath: '/webpack/',

    filename: production ? '[name]-[chunkhash].js' : '[name].js'
  },

  resolve: {
    root: path.join(__dirname, '..', 'webpack')
  },

  plugins: [
    // must match config.webpack.manifest_filename
    new StatsPlugin('manifest.json', {
      // We only need assetsByChunkName
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true
    })]
};

if (production) {
  config.plugins.push(
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: { warnings: false },
      sourceMap: false
    }),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify('production') }
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin()
  );
} else {
  config.devServer = {
    port: devServerPort,
    headers: { 'Access-Control-Allow-Origin': '*' }
  };
  config.output.publicPath = '//localhost:' + devServerPort + '/webpack/';
  // Source maps
  config.devtool = 'cheap-module-eval-source-map';
}

module.exports = config;

И в моем webpack/application.js я называю этот пакет начальной загрузки следующим образом.

require("bootstrap/dist/css/bootstrap.css");
console.log("Hello world!");

Теперь, когда я перезапускаю сервер и перезагружаю страницу, я не вижу никаких изменений в шрифте, а не в консоли, которую я получаю.

Uncaught Error: Cannot find module "bootstrap/dist/css/bootstrap.css"
    at webpackMissingModule

Что я здесь делаю неправильно?