无法在webpack-rails上访问正确的node_modules路径

Question

我第一次尝试使用带轨道的angularjs作为后端。我正在使用webpack-rails gem来管理css和其他样式表的webpack配置。

首先，我制作了一个示例angular + rails应用程序，以显示简单的文本“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中，我按如下方式调用bootstrap包。

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

现在，当我重新启动服务器并重新加载页面时，我没有看到字体的任何变化，而是在我得到的控制台中。

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

我在这做错了什么？

Answer 1

也许...

require('boostrap');

如果这不起作用，请检查文件bootstrap/dist/css/bootstrap.css是否存在