如何使用Webpack 2将库的css捆绑到bundle.js中？

Question

我正试着用Webpack 2为我的前端框架做一个非常基本的设置。我想捆绑material-components-web，它是css，但我想不出如何捆绑CSS。

我希望有一个可以加载到HTML文件中并能够调用mdc组件的bundle.js。这是我的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中包含您的css

​

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

​