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-plugin正是您想要实现的目标。更多信息here。我在我的所有webpack构建中使用它，而且实现起来相当简单。您还需要使用style-loader / css-loader和extract text插件。一旦你完成所有这些，你的webpack配置应该是这样的。 var webpack = require（＆＃34; webpack＆＃34;）;

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文件。

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

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

Webpack 1.12：捆绑css文件

1 个答案: