Question

我正在尝试使用Webpack 2为我的前端框架做一个非常基本的设置。我想捆绑material-components-web并且它是css，但我也无法弄清楚如何捆绑CSS。

我希望我可以在HTML文件上加载bundle.js，并且可以调用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中的css

＆＃13;

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

＆＃13;

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

1 个答案: