Webpack 1.12：捆绑CSS文件

cbll 发表于 Dev

cbll

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

保罗·卡斯普里斯基（Paul Kaspriskie）

我相信extract-text-webpack-plugin正是您要实现的目标。更多信息在这里。我在所有的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"),
            },
        ]
    },
};

从那里开始，只需要main.js文件中的css文件即可。