Javascript Webpack 1.12：捆绑css文件

我成功地绑定了.js文件，并使用加载程序正确处理它们。我当前的配置如下：

"use strict";

var webpack = require("webpack");

module.exports = {
    entry: {
        main: 'main.js',
        vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap"],
    },
    output: { path: "../resources/public", filename: 'bundle.js' },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"static/vendor.bundle.js"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ],

    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', 'stage-0']
                }
            }
        ]
    },
};

---

我现在有一堆css文件，其中一些来自供应商模块。我如何以同样的方式将它们绑定到bundle.css（只有一个）和vendor.bundle.css（模块），类似于上面的结构？

我相信extract text webpack插件正是实现这一点所需要的。更多信息。我在我所有的网页构建中都使用它，而且实现起来相当简单。您还需要使用样式加载器/css加载器以及提取文本插件。一旦你做了所有这些，你的网页配置应该是这样的。 var webpack=需要（“webpack”）

从这里开始，只需要在main.js文件中包含css文件

require('./path/to/style.css');

---

现在，当您运行webpack时，它应该在您的根目录中输出一个css文件

提取文本插件可以帮助你。我发现：，我将尝试在新版本中使用他们的文档（虽然有点混乱），它只需要一个对象作为参数：ExtractTextPlugin.extract（{fallback:“style loader”，use:“css loader”}）注意，extract text webpack插件已弃用（），不应使用。您可以使用mini css extract plugin（）代替。

require('./path/to/style.css');