Webpack: Integrieren Bootstrap 3 mit Angular 2 App

Question

Ich verwende Webpack Modul Bundler in meinem eckigen 2-Projekt. Ich muss BootStrap mit meiner Anwendung unter Verwendung webpack integrieren. Ich habe Bootstrap mit npm installiert. Hier ist die Momentaufnahme meines package.json

"devDependencies": { 
    "@angular/compiler-cli": "2.4.6", 
    "@types/hammerjs": "^2.0.33", 
    "@types/jasmine": "^2.2.34", 
    "@types/moment": "^2.13.0", 
    "@types/moment-timezone": "^0.2.34", 
    "@types/node": "^7.0.0", 
    "@types/selenium-webdriver": "~2.53.39", 
    "@types/source-map": "^0.5.0", 
    "@types/uglify-js": "^2.0.27", 
    "@types/webpack": "^2.0.0", 
    "add-asset-html-webpack-plugin": "^1.0.2", 
    "angular2-template-loader": "^0.6.0", 
    "assets-webpack-plugin": "^3.5.1", 
    "awesome-typescript-loader": "~3.0.0-beta.18", 
    "codelyzer": "~2.0.0-beta.4", 
    "copy-webpack-plugin": "^4.0.0", 
    "css-loader": "^0.26.0", 
    "exports-loader": "^0.6.3", 
    "expose-loader": "^0.7.1", 
    "extract-text-webpack-plugin": "^2.0.0-beta", 
    "file-loader": "^0.10.0", 
    "find-root": "^1.0.0", 
    "gh-pages": "^0.12.0", 
    "html-webpack-plugin": "^2.28.0", 
    "imports-loader": "^0.7.0", 
    "istanbul-instrumenter-loader": "2.0.0", 
    "jasmine-core": "^2.5.2", 
    "json-loader": "^0.5.4", 
    "karma": "^1.4.1", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-coverage": "^1.1.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-mocha-reporter": "^2.2.2", 
    "karma-remap-coverage": "^0.1.4", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-webpack": "2.0.1", 
    "ng-router-loader": "^2.1.0", 
    "ngc-webpack": "1.1.0", 
    "node-sass": "^4.5.0", 
    "npm-run-all": "^4.0.1", 
    "optimize-js-plugin": "0.0.4", 
    "parse5": "^3.0.1", 
    "protractor": "^4.0.14", 
    "raw-loader": "0.5.1", 
    "rimraf": "~2.6.0", 
    "sass-loader": "^6.0.0", 
    "script-ext-html-webpack-plugin": "^1.6.2", 
    "source-map-loader": "^0.1.5", 
    "string-replace-loader": "1.0.5", 
    "style-loader": "^0.13.2", 
    "to-string-loader": "^1.1.4", 
    "ts-node": "^2.0.0", 
    "tslib": "^1.5.0", 
    "tslint": "~4.5.1", 
    "tslint-loader": "^3.3.0", 
    "typedoc": "^0.5.3", 
    "typescript": "~2.1.6", 
    "url-loader": "^0.5.7", 
    "webpack": "2.2.0", 
    "webpack-dev-middleware": "^1.10.0", 
    "webpack-dev-server": "2.4.1", 
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5", 
    "webpack-merge": "~3.0.0" 
    } 

Hier ist mein webpack.common.js:

//rules... 
{ 
      test: /\.css$/, 
      include: [ 
      helpers.root('node_modules','font-awesome','css'), 
      helpers.root('node_modules','bootstrap', 'dist', 'css') 
      ], 
      loader: ExtractTextPlugin.extract({ 
      fallbackLoader: "style-loader", 
      loader: [ 
       { loader: 'css-loader', query: {sourceMap: true} } 
       ] 
      }) 
} 
... 
... 
... 

//plugins 
[ 
.. 
.. 
.. 
new ExtractTextPlugin({filename:'styles.css', disable: false, allChunks: true }) 
] 

Wenn ich npm run build Befehl ausführen. alles funktioniert gut bu Ich bekomme folgenden Fehler bezüglich bootstrap.

Ich bin mir nicht sicher, was ich vermisse. Ich habe es gegoogelt, konnte aber keine Lösungen finden. Kann mir bitte jemand helfen. Vielen Dank.

Answer 1

Sie verwenden falsche Argumente in Ihrer ExtractTextPlugin.extract() -Methode. Es gibt keine FallbackLoader Schlüsselwort in Ihrer Version (nach der source) und es ist in der neuesten veraltet (das gleiche wie die Loader).

Aktualisieren Sie die Extrakt-Text-webpack-Plugin Abhängigkeit spätestens ein und es auf folgende Weise verwenden:

{ 
    test: /\.css$/, 
    include: [whatever], 
    use: ExtractTextPlugin.extract({ 
     fallback: "style-loader", 
     use: "css-loader" 
    }) 

}