如何使用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/ 
 
      } 
 
     ] 
 
    }