webpackMissingModule application.js、角型アプリケーションのレールに

Question

私は作者の指示に従っています。 以下は、私は、ブートストラップを要求することによって、異なるフォントにデフォルトのフォントを変更しようとしています

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

package.jsonです。

マイ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を検索するのでは解消されているときに、それはあなたの

決意で検索：{ルート：path.join（__ dirnameは、 '..'、 'WebPACKの' ）}