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ファイルだけでなく、ベンダモジュールからそれらのいくつかの束を持っています。上記の構造に似て、私は自分のために同じ方法でバンドルをどのようにバンドルするのですか（ただ一つあります）と、モジュールのvendor.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"), 
      }, 
     ] 
    }, 
}; 

そこから、あなたのmain.jsファイル内にあなたのcssファイルが必要です。

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

webpackを実行すると、ルートディレクトリ内にCSSファイルが出力されます。