Webpack 1.12:捆绑css文件

Question

我成功地捆绑了.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，类似于上面的结构？

Answer 1

我相信extract-text-webpack插件就是你想要的。更多信息here。我在我所有的webpack构建中都使用它，而且实现起来相当简单。您还需要使用style-loader/css-loader以及提取文本插件。完成所有这些操作后，您的webpack配置应该如下所示。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 ExtractTextPlugin("[name].css"),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
    ],

    module: {
        loaders: [
            {
              test: /.js?$/,
              loader: 'babel-loader',
              exclude: /node_modules/,
              query: {
                presets: ['es2015', 'react', 'stage-0']
              }
            },
            {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract("style-loader","css-loader"),
            },
        ]
    },
};

从那里只需要你的css文件在你的main.js文件。

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

现在，当你运行webpack时，它应该会在你的根目录下输出一个css文件。