如何使用Webpack 2將庫的CSS捆綁到bundle.js中？

Question

我想爲我的前端框架使用Webpack 2做一個非常基本的設置。我想捆綁material-components-web和它的CSS，但我無法弄清楚如何捆綁CSS。

我希望有一個bundle.js，我可以加載一個HTML文件，並能夠呼叫mdc組件。這裏是我的webpack.config.js

const path = require('path'); 

module.exports = { 
    entry: './index.js', 
    output: { 
     path: path.resolve(__dirname, 'assets/communications/js'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.css$/, 
       loader: 'css-loader', 
       exclude: /node_modules/ 
      } 
     ] 
    } 
}; 

這是我的入境文件index.js

import * as mdc from 'material-components-web'; 

的問題是，我失去了我應該如何捆綁CSS一點點。語法可能類似於@import "material-components-web/material-components-web";但我不知道應該把它放在哪裏，是否在index.js文件中，或者我應該創建一個styles.scss文件並將其導入index.js等。我整體丟失了。

此設置的原因是因爲我們的代碼庫使用material-design-lite,jQuery和Bootstrap中的組件，但它還沒有構建任務，所以這有點像第一步。

Answer 1

我想，你需要的風格裝載機（https://github.com/webpack-contrib/style-loader），其中將包括在bundle.js

module: { 
 
     loaders: [ 
 
      { 
 
       test: /\.js$/, 
 
       loader: 'babel-loader', 
 
       exclude: /node_modules/ 
 
      }, 
 
      { 
 
       test: /\.css$/, 
 
       loader: 'style!css', 
 
       exclude: /node_modules/ 
 
      } 
 
     ] 
 
    }