Webpack和Bootstrap問題

Question

我對Webpack和NodeJS很陌生，所以我只是爲了學習而進行簡單的測試。我正在開發一個新的網站，這裏是我的想法：

我有一個vendor.ts文件，我可以把我所有的廠商js和css：

// Angular 2 
 
import '@angular/platform-browser'; 
 
import '@angular/platform-browser-dynamic'; 
 
import '@angular/core'; 
 
import '@angular/common'; 
 
import '@angular/http'; 
 
import '@angular/router'; 
 

 
// RxJS 
 
import 'rxjs'; 
 

 
// Bootstrap 
 
import 'bootstrap'; 
 
import '../node_modules/bootstrap/dist/css/bootstrap.css'; 
 

 
//jQuery 
 
import 'jquery';

所以，這裏的我的WebPack配置：

var webpack = require('webpack'); 
 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
 
var helpers = require('./helpers'); 
 

 

 
module.exports = { 
 
    entry: { 
 
    'polyfills': './src/polyfills.ts', 
 
    'vendor': './src/vendor.ts', 
 
    'app': './src/app/main.ts' 
 
    }, 
 

 
    output: { 
 
    path: './src/public/', 
 
    publicPath: 'http://localhost:3000/', 
 
    filename: '[name].js', 
 
    chunkFilename: '[id].chunk.js' 
 
    }, 
 

 
    devtool: 'cheap-module-eval-source-map', 
 

 
    resolve: { 
 
    extensions: ['', '.js', '.ts'] 
 
    }, 
 

 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.ts$/, 
 
     loaders: ['ts', 'angular2-template-loader'] 
 
     }, 
 
     { 
 
     test: /\.html$/, 
 
     loader: 'html' 
 
     }, 
 
     { 
 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
 
     loader: 'file?name=assets/[name].[hash].[ext]' 
 
     }, 
 
     { 
 
     test: /\.css$/, 
 
     loader: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader: "css-loader?souceMap"}) 
 
     }, 
 
    ], 
 
    plugins: [ 
 
     new ExtractTextPlugin("[name].css") 
 
    ] 
 
    }, 
 

 
    plugins: [ 
 
    new webpack.optimize.CommonsChunkPlugin({ 
 
     name: ['app', 'vendor', 'polyfills'] 
 
    }), 
 

 
    new HtmlWebpackPlugin({ 
 
     template: './src/index.html' 
 
    }), 
 

 
    new webpack.ProvidePlugin({ 
 
     $: "jquery", 
 
     jQuery: "jquery", 
 
     "window.jQuery": "jquery" 
 
    }) 
 
    ] 
 
};

當我跑「的WebPack」命令時，它拋出我的錯誤：

ERROR in ./src/vendor.ts Module not found: Error: Cannot resolve module '[object Object]' in /home/xxxxx/xxxx/xxxxx-xxxx/src @ ./src/vendor.ts 13:0-59

是否有人能幫助我嗎？

謝謝！

編輯：該解決方案可以找到https://github.com/webpack/extract-text-webpack-plugin/issues/215

Answer 1

該解決方案可以在https://github.com/webpack/extract-text-webpack-plugin/issues/215

由於被發現！

Answer 2

這是錯誤這麼做import '../node_modules/bootstrap/dist/css/bootstrap.css'。 對於非代碼文件，您必須改用require，如require('../node_modules/bootstrap/dist/css/bootstrap.css')。

這篇文章可幫助https://webpack.github.io/docs/stylesheets.html