的WebPack：集成自举3角2应用

Question

我使用Webpack模块捆绑在我的角度2项目。我需要使用webpack将BootStrap与我的应用程序集成。我使用npm安装了Bootstrap。下面是我的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" 
    } 

快照这是我的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 }) 
] 

当我运行npm run build命令。一切工作正常埠我得到以下错误有关bootstrap。

ERROR in ./~/css-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/style-loader!./~/css-loader?{"sourceMap":true}!./~/bootstrap/dist/css/bootstrap.css 
Module build failed: Unknown word (1:1) 

> 1 | // removed by extract-text-webpack-plugin 
    |^

@ ./~/bootstrap/dist/css/bootstrap.css 2:21-235 
@ ./src/app/app.component.ts 
@ ./src/app/app.module.ts 
@ ./src/app/index.ts 
@ ./src/main.browser.ts 

我不知道我在想什么。我GOOGLE了它，但找不到任何解决方案。任何人都可以请帮忙。谢谢。

Answer 1

您正在使用您的ExtractTextPlugin.extract（）方法错了论据。没有fallbackLoader您的版本（根据source）的关键字在最近的一个（与加载程序相同）不推荐使用。

更新提取物，文本的WebPack-插件依赖性最新的一个，并以下列方式使用它：

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

}