Webpack和Bootstrap问题

Webpack和Bootstrap问题

问题描述:

我对Webpack和NodeJS很陌生,所以我只是为了学习而进行简单的测试。我正在开发一个新的网站,这里是我的想法:Webpack和Bootstrap问题

我有一个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

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

由于被发现!

这是错误这么做import '../node_modules/bootstrap/dist/css/bootstrap.css'。 对于非代码文件,您必须改用require,如require('../node_modules/bootstrap/dist/css/bootstrap.css')

这篇文章可帮助https://webpack.github.io/docs/stylesheets.html

+0

不,使用'import'style.css''没有错。 – Everettss

+0

但我得到这个错误,每一个webpack试图导入的CSS文件。 我的app.component.ts使用app.component.css并得到相同的错误.. –

+0

在尝试更改导入的require后,仍然得到了错误:( –