Webpack 1.12:捆绑CSS文件 [英] Webpack 1.12: Bundle css files

问题描述

我已成功捆绑.js文件并使用加载程序正确处理它们.我当前的配置在这里:

I'm successfully bundling .js files and processing them correctly with the loaders. My current config is here:

"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中，类似于上面的结构?

I now have a bunch of css files, some of them from the vendor modules as well. How do I bundle them in the same manner to a bundle.css for my own(there's just one) and vendor.bundle.css for the modules, similar to the structure above?

推荐答案

我相信extract-text-webpack-plugin正是您要实现的目标.更多信息此处.我在所有的webpack版本中都使用了它，并且实现起来很简单.您还需要将style-loader/css-loader与提取文本插件一起使用.完成所有操作后，您的webpack配置应如下所示.var webpack = require("webpack");

I believe the extract-text-webpack-plugin is exactly what you want for achieving this. More info here. I use it on all my webpack builds and rather simple to implement. You will also need to use style-loader/css-loader along with the extract text plugin. Once you do all that your webpack config should look something like this. 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文件.

From there just require your css file within your main.js file.

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

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

Now when you run webpack it should output a css file within your root directory.

这篇关于Webpack 1.12:捆绑CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！