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

我认为，您需要 style-loader(https://github.com/webpack-contrib/style-loader) 它将您的 css 包含在 bundle.js 中

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