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 用于我自己的（只有一个）和供应商。bundle.css 用于模块，类似于上面的结构？

Answer 1

我相信 extract-text-webpack-plugin 正是您想要实现的目标。更多信息 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 文件。

Webpack 1.12：捆绑 css 个文件

Webpack 1.12: Bundle css files

javascript

css

webpack

webpack-style-loader