webpackMissingModule应用程序.js在带有角度app的rails上

Question

我遵循作者给出的步骤。以下是

的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"
  }
}

我试图通过要求引导程序将默认字体更改为不同的字体。

我的application.js看起来像这样

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

然后我重新启动了服务器。我看到文本内容与之前没有任何变化的字体系列相同，而实际上它应该是不同的字体。并且控制台正在给出如下错误。

安慰

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

webpack.config.js

// Example webpack configuration with asset fingerprinting in production.
'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;

我无法弄清楚这是否是npm安装问题或其他问题。我怎样才能解决这个问题。

Answer 1

看来你使用旧版本的webpack，我在看到resolve.root属性后推断。来自webpack 1 docs

包含模块的目录（绝对路径）。也可以是一系列目录。此设置应用于将单个目录添加到搜索路径。

所以当你的bootstrap.css文件被解析而不是搜索node_modules时，它会搜索你的

解决：{root：path.join（__ dirname，'..'，'webpack'）}