Webpackのブートストラップローダーエラー： './bootstrap-styles'を解決できません。 '//bootstrap-scripts'を解決できません。

Question

にbootstrap-loaderを使用しようとしています。 WebPACKのコンパイル出力エラーが：

ERROR in ./~/bootstrap-webpack/index.js 
Module not found: Error: Can't resolve './bootstrap-styles' in 'd:\web\angular2-webpack-starter\node_modules\bootstrap-webpack' 
@ ./~/bootstrap-webpack/index.js 1:0-66 
@ ./src/vendor.browser.ts 
@ multi vendor 

ERROR in ./~/bootstrap-webpack/index.js 
Module not found: Error: Can't resolve './bootstrap-scripts' in 'd:\web\angular2-webpack-starter\node_modules\bootstrap-webpack' 
@ ./~/bootstrap-webpack/index.js 2:0-52 
@ ./src/vendor.browser.ts 
@ multi vendor 

再現手順：

1. クローンhttps://github.com/AngularClass/angular2-webpack-starter
2. npm install
3. npm install bootstrap-webpack --save
4. npm install less-loader less --save-dev
5. 追加ライン：require("bootstrap-webpack");へsrc/vendor.browser.ts
6. は、ブートストラップ・WebPACKのドキュメントからconfig/webpack.common.jsにいくつかのルールを追加します。
7. npm start

ルールをbootstrap-webpack documentationから：

// bootstrap-webpack has access to the jQuery object 
{ test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' }, 
// Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack) 
// loads bootstrap's css. 
{ 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" } 

Answer 1

私はあなたは自分のプロジェクトにbootstarpスタイルを追加したい理解できるように、ベースウェブパックで。

私のために働いた簡単な解決策は、単にあなたのスタイルに、次の追加された/ styles.scss：

@importのURL（ 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'）;

Answer 2

いくつかのローダーをインストールする必要があった（bootstrap-webpackはそれらに依存していないようです）、url-loaderとfile-loaderは正確なバージョンをここにインストールしてwebpack 1を使用しなければなりませんでした

//packages.json 
{ 
    "dependencies": { 
    "bootstrap-webpack": "^0.0.5", 
    "jquery": "^3.1.1", 
    }, 
    "main": "js/entry.js", 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.22.0", 
    "bootstrap": "^3.3.7", 
    "css-loader": "^0.26.1", 
    "exports-loader": "^0.6.3", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "file-loader": "0.8.1", 
    "imports-loader": "^0.7.0", 
    "less": "^2.7.2", 
    "less-loader": "^2.2.3", 
    "style-loader": "^0.13.1", 
    "url-loader": "0.5.5", 
    "webpack": "1" 
    } 
} 

// webpack.config.js 
module: { 
    loaders: [ 
     {test: /\.jsx?$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/, query: {presets: ['es2015']}}, 
     {test: /\.css$/, loader: 'css-loader'}, 
     {test: /\.(woff|woff2)$/, loader: 'url-loader?limit=10000'}, 
     {test: /\.ttf$/, loader: 'file-loader'}, 
     {test: /\.eot$/, loader: 'file-loader'}, 
     {test: /\.svg$/, loader: 'file-loader'} 
    ] 
} 

その後require("bootstrap-webpack");を追加し、webpackを実行し、何とかそれが動作します：パッケージのいずれか）がそれに依存します！