Проблемы с 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

ли кто-нибудь может мне помочь?

Спасибо!

EDIT: решение можно найти в 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