webpack 分离css html,webpack使用extractTextPlugin分离css文件时，会将样式直接插入到html的header里，怎么解决？...

问题：在使用 webpack 的插件 extract-text-webpack-plugin 做多入口 css 样式分离时，只生成了一个 css 文件(main.css)，其余入口的样式被插入到了 html 的 header 里面，现在想把插入到 header 中样式提取出来写进 vender.css 中应该怎么处理？？

我的webpack.config.js配置如下：

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

config = {

entry: {

vendor: ['jquery', 'lodash', 'angular', 'angular-ui-router','angular-ui-bootstrap', 'bootstrap'], //公共模块的集合

main: __dirname + "/app/index.js", //已多次提及的唯一入口文件

},

output: {

path: __dirname + "/build", // 打包后的文件存放路径

filename: "[name]-bundle-[hash].js", // 打包后的js文件放到build目录下，需要通过占位符才能打包为多个js文件，否则会依次覆盖文件

},

module: {

rules: [

{

test: /(\.js)$/,

use: {

loader: "babel-loader"

},

exclude: /node_modules/

},

{

test: /\.css$/,

use: ExtractTextPlugin.extract({

fallback: "style-loader", // 规则提取器

use: [{

loader: "css-loader",

options: {

minimize: false, // 是否压缩

modules: true, // 是否启用 css modules 规范

localIdentName: '[name]__[local]--[hash:base64:5]'

}

},{

loader: "postcss-loader"

}]

}),

exclude: /node_modules/

}

]

},

plugins: [

new HtmlWebpackPlugin({

favicon: __dirname + "/app/favicon.ico",

filename: __dirname + '/build/index.html', //打包后的 html 文件名及路径

template: __dirname + "/app/index.html", // html模板路径

inject: 'body', // 指定打包好的

hash: true, //为静态资源生成hash值

chunks: ['main', 'common'] // 给页面指定要打包的js模块， common 来自 CommonsChunkPlugin 插件提取的公共代码

}),

// 如果入口有多个节点，可以有选择的提取公共代码，生成一个common.js

new webpack.optimize.CommonsChunkPlugin({

name:'common', // 注意不要.js后缀

chunks: ['main', 'vendor']

}),

new ExtractTextPlugin("[name]-bundle-[hash].css")

],

devtool: 'eval'

};

module.exports = config;

运行webpack后生成的文件如下图：

可以看到期望生成的 js 文件都正常，但是期望生成的 vender-bundle-[hash].css 文件却没有生成，只生成了 main-bundle-[hash].css 。而在浏览器中查看页面，发现 html 的 header 中插入了 style 标签，分析看应该是入口 entry 中 vendor 中引入的模块产生的样式，如下图所示：

怎样才能将插入到页面样式提取出来呢？？大神们帮忙解答一下啊，不胜感激~